Сохранить состояния объектов в .data или attr - Производительность против CSS?

Ответ 1

Эта рабочая часть вопроса кричит о преждевременной оптимизации; Смотри ниже. (Чтобы не возникла неправильная идея: я тоже часто виновата в том, что задаюсь вопросом о том же вопросе преждевременной оптимизации.)

Но получение производительности в сторону (другие точки, указанные ниже графика): насколько я могу судить, attr быстрее, чем data в jQuery 1.7.1: http://jsperf.com/jquery-setting-attr-vs-data Это меня удивляет. Не то чтобы это отдаленно могло иметь значение.

Графическая гистограмма (более длинные строки = более высокая производительность):

Есть ли другие причины, о которых вы можете думать, использовать .attr(), а не .data()?

По крайней мере, пара приходит на ум:

• Преимущество data заключается в том, что ему не нужно каждый раз писать элемент; вы только пишете фактический элемент в первый раз, а с тех пор jQuery просто обновляет значение в объекте JavaScript, который он поддерживает в отдельном кеше объектов (подключен к элементу с помощью ключа). (Я не уверен, почему он медленнее, чем attr, возможно, из-за косвенности.)

• Мне не нравится то, что это не симметрично. При первом обращении к элементу data объект данных засевается атрибутами data-* от элемента; но оттуда, между ними нет никакой связи.

  Пример (живая копия живой источник):

  var target = $("#target");
  display("data('foo'): " + target.data("foo"));
  display("data-foo: " + target.attr("data-foo"));
  display("Setting data('foo')");
  target.data("foo", "updated data('foo')");
  display("data('foo'): " + target.data("foo"));
  display("data-foo: " + target.attr("data-foo"));
  display("Setting data-foo");
  target.attr("data-foo", "updated data-foo");
  display("data('foo'): " + target.data("foo"));
  display("data-foo: " + target.attr("data-foo"));
  

  Предполагая, что элемент #target начинается с data-foo="bar", вывод:

  data('foo'): bar
  data-foo: bar
  Setting data('foo')
  data('foo'): updated data('foo')
  data-foo: bar
  Setting data-foo
  data('foo'): updated data('foo')
  data-foo: updated data-foo

  Это может быть запутанным и неожиданным. Способ, которым вы должны думать об этом, состоит в том, что атрибуты data-* являются значениями по умолчанию. Мне просто не нравится, как они так зависят от того, вы назовете data до или после; если вы никогда не напишете непосредственно в атрибуте data-*, вы не можете быть уверены, какое значение data получит (оригинал из разметки или значение, которое вы обновили позже, до того, как вы назовете data)). Для меня это немного хаотично, но если вы устанавливаете правила (никогда не записывайте атрибуты data-* напрямую и только когда-либо используете data, например), вы можете избежать хаоса.

• Когда вы используете attr, вы можете хранить только строки. Когда вы используете data, вы можете сохранить любое значение JavaScript или ссылку на объект.

Потому что производительность всегда является аргументом!

Не в 2012 году.:-) Или, по крайней мере, это намного ниже списка по сравнению с другими аргументами, чем когда-либо отсутствовало конкретная, очевидная проблема с производительностью.

Посмотрите на свои результаты runfirst #rp4: 10k итераций attr заняло 515ms; 10k итераций data заняло 268 мс. Это 51,5 мкс (микросекунды, миллионные секунды секунды) по сравнению с 26,8 мксек каждый. Поэтому вам интересно, следует ли использовать data, если он экономит вам 24,7 секунды на операцию. Люди воспринимают вещи порядка десятых долей секунды. Поэтому для этого важно, чтобы вы делали это примерно 4000 раз в узкой петле, чтобы человек заметил разницу. Это просто не стоит даже беспокоиться, даже в обработчике mousemove.

Если вы находитесь на этой территории (4000/сек в узкой петле), вы, вероятно, захотите вообще не хранить информацию о элементе.

Ответ 2

Учитывая, что .data() действительно медленнее, чем .attr() в большинстве браузеров, но разница в скорости не важна в этом вопросе, одна преимущество data() over attr() заключается в том, что данные будут автоматически привязывать атрибуты data- к значениям numbers или boolean, если они совпадают.

Это означает, что

<div id="boolean" data-t="true" data-f="false">

приведет к булевскому времени выполнения true и false при запуске:

console.log($('#boolean').data('t'));  // reports true (not a string)
console.log($('#boolean').data('f'));  // reports false (not a string)

и

<div id="number" data-n="123.456">

приведет к количеству значений времени выполнения 123.456 при запуске:

console.log($('#number').data('n'));  // Reports 123.456 (not a string)

attr, с другой стороны, работает только со строками, но преобразует значение в строки для сохранения. Он не будет вызывать ценности при их получении.

Выбор между attr и data зависит от функции, которая вам нужна для конкретного примера:

• Когда я ввожу параметры data- с сервера на страницы, я обычно использую data() для доступа к ним, хотя бы потому, что это более короткий код.
• Если мне нужно, чтобы данные были видимыми в DOM, я буду использовать attr() для сохранения значений.

Ответ 3

Вы можете использовать jQuery.data. Это почти всегда самый быстрый. jQuery пытается оптимизировать свою функцию в каждом браузере и максимизировать совместимость. Таким образом, с новыми версиями jQuery вы можете получить производительность для этой функции. Этот второй тест дал мне jQuery.data победителем.