JQuerys $ .data () против свойства объекта DOM

Question

Мне недавно нужно было добавить некоторые данные в динамически создаваемый LI elements.В моем первом случае я использовал .data() таким образом, как

var _newli = $('<li>foobar</li>');
_newli.data('base', 'ball');
// append _newli to an `ul`

, который был ужасно медленным.Эта логика происходит в цикле, который может легко вырасти до 500+ предметов, это заняло целую вечность!Иногда это даже нарушало временные рамки выполнения javascript.

Поэтому я изменил на $.data().Каким-то образом присоединение данных к объекту с помощью 8x происходит быстрее, чем при вызове метода .data().Так что теперь это выглядело как

var _newli = $('<li>foobar</li>');
$.data(_newli[0], 'base', 'ball');
// append _newli to an `ul`

Это было / действительно быстрее, но все же потребовалось 3-4 секунды (!), Чтобы собрать все мои элементы (В моем реальном коде есть как 6 вызовов$ .data за элемент).

Так что я действительно застрял с этим, я спросил себя, зачем вообще использовать .data() или $.data()?Я мог бы просто прикрепить свои данные к DOM object.Так что я сделал

var _newli = $('<li>foobar</li>');
_newli[0].base = 'ball';
// append _newli to an `ul`

Вуаля, вау до шока, это было невероятно быстро!Я не мог поверить, что все прошло так хорошо без каких-либо недостатков.Так вот в чем мой вопрос.Я не нашел никаких недостатков для этой техники в сети.Есть чтения о циклических ссылках , которые вы можете создать, используя этот способ, но AFAIK "только" в IE и только если вы ссылаетесь на objects.

Есть какие-нибудь мыслители?

обновление

Спасибо за хорошие комментарии и посты, ребята.Краткое обновление @patrick dw:

Вы правы, я использовал нижний слой DOM element при использовании $.data().Он даже не работает с объектами jQuery, по крайней мере, не так, как ожидалось.Идея об использовании одного объекта и прохождении его через $.date() возникла у меня сама, но опять же я был настолько шокирован разницей в производительности, что решил просто игнорировать метод .data(), как навсегда.

Answer 1

Вы правы в отношении циклических ссылок , что не является проблемой вне IE, а в IE это становится проблемой только тогда, когда JavaScript имеет ссылку на объект DOM и назначен объект JS к одному из свойств объекта DOM. Я считаю, что это можно решить, просто обнуляя любые ссылки в JS на объект DOM.

Метод $().data() - это слишком сложная оболочка для $.data() (см. jQuery.fn.data: http://github.com/jquery/jquery/blob/master/src/data.js#L126,, которая в свою очередь вызывает jQuery.data: http://github.com/jquery/jquery/blob/master/src/data.js#L20),, так что вырезать этого среднего человека сэкономьте нетривиальное количество времени, особенно если это будет сделано 500 раз.

В этом случае метод $().data('foo', 'bar') не делает намного больше, чем el.foo = 'bar'. Делай, что быстрее.

Answer 2

При попытке добавить пользовательские свойства к объекту NodeList браузер (IE) может запретить его. Смотри: http://lists.w3.org/Archives/Public/public-webapps/2010JanMar/0864.html

Answer 3

Это может помочь:

• Могу ли я просто создать атрибуты для моих тегов HTML?
• Добавить пользовательский атрибут в теги HTML

И прочитайте следующее об использовании пользовательского DTD:

• http://htmlhelp.com/tools/validator/customdtd.html

Короче говоря, по большей части я надеваюНе думаю, что вы столкнетесь с какими-либо проблемами при использовании пользовательских атрибутов.Наиболее разумные / современные браузеры подойдут для этого.Я скажу, что у меня возникли проблемы с веб-приложением, которое я разработал для MobileSafari, что заставило меня прибегнуть к использованию $.data скрытых элементов.К счастью, у меня не было 500+ элементов, а больше, как пять или шесть.