9

I recently needed to append some data to dynamically created LI elements. In my first instance, I used .data() in a way like

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

that.. was terribly slow. This logic happens in a loop which can easily grow up to 500+ items, it took ages! Sometimes it even broke the javascript execution time frame.

So I changed to $.data(). Somehow, attaching data to an object with that is like 8x faster than doing it over the .data() method call. So now it looked like

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

That was/is indeed faster, but still it took like 3-4 seconds(!) to build up all my elements (In my real code there are like 6 calls to $.data per element).

So I was really stuck with that, I asked myself why the heck to use .data() or $.data() anyway? I could just attach my data to the DOM object. So I did

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

Voila, wow to my shock, that was incredibly fast! I couldn't believe that this ran so good without any disadvantage. So that is what is my question all about actually. I didn't find any disadvantage for this technique so far on the net. There are reads about circular references you can create using this way, but AFAIK "only" on IE's and only if you refer to objects.

Any thoughts experts ?

update

Thanks for the good comments and postings guys. Short update @patrick dw:

You are right, I was passing the underlaying DOM element when using $.data(). It does not even work with jQuery objects, at least not as expected. The idea about using one object and pass it through $.date() I had myself, but then again I was so shocked about the performance difference I decided just to ignore the .data() method like forever.

7
  • If there were "6 calls to $.data per element", is there a reason why you didn't just do one call, and pass in one object for the value that contains all the properties you want? $.data(_newli,'myvalues',{'base':'ball','basket':'ball','foot':'ball'});
    – user113716
    Aug 4, 2010 at 16:47
  • 2
    In a talk, John said that it is slow, and suggests to do var data = $('selector').data(); data['foo'] = 'bar'; data['bar'] = 'foo'; etc., so that you only have one access to it. just FYI. Aug 4, 2010 at 16:49
  • @jAndy - You should be passing DOM elements to $.data(). Not jQuery objects. I wonder if that has a performance impact as well. $.data(_newli[0], 'base', 'ball');
    – user113716
    Aug 4, 2010 at 17:08
  • @patrick dw: updated the post! @Felix Kling: Sounds pretty reasonable, do you know where I can find that Resig talk/paper? I'l give it a shot anyway, the big question there is, does it come close do the DOM property storage? Otherwise it's pretty useless anyway.
    – jAndy
    Aug 4, 2010 at 17:34
  • 1
    jAndy - I did a couple profiles with Webkit's profile tools, using @Felix's solution vs writing to the DOM element, assigning one property. If I do not include the initial variable assignment in the test, data: 0.025ms, DOM: 0.040ms. If I do include variable assignment for data(), var data = $.data(_newli[0]), it varies data: 0.040ms to 0.225ms. But this is for assigning one property. Assigning several properties will close some of that gap (when it exists). Using $.data() on 500 elements, at its slowest would be around 22ms. Pretty fast. Again, this is Webkit only.
    – user113716
    Aug 4, 2010 at 18:20

3 Answers 3

3

You are correct about circular references, that isn't an issue outside of IE, and in IE it only becomes an issue when JavaScript has a reference to a DOM object, and a JS object is assigned to one of the DOM object's properties. I believe this can be resolved by simply by nullifying any references in JS to the DOM object.

The $().data() method is an overly complicated wrapper for $.data() (see jQuery.fn.data: http://github.com/jquery/jquery/blob/master/src/data.js#L126, which in turn calls jQuery.data: http://github.com/jquery/jquery/blob/master/src/data.js#L20), so cutting out that middle man will save a non trivial amount of time, especially if it's to be done 500 times.

In this case, the $().data('foo', 'bar') method doesn't do much more than el.foo = 'bar'. Do what's fastest.

0
2

When trying to add custom properties to a NodeList object the browser (IE) might disallow it. See: http://lists.w3.org/Archives/Public/public-webapps/2010JanMar/0864.html

0

These might help:

And read the following on using a custom DTD:

In short, for the most part I don't think you'll run into any problems using custom attributes. Most sensible/current browsers will fine with it. I will say, I did run into problems with a webapp I developed for MobileSafari, which forced me to resort to using $.data hidden elements. Fortunately, I did not have 500+ elements, but more like five or six.

1
  • 1
    I guess we're talking about two different storys. If you attach some data to element.somedata = {foo: 5}; there is no attribute created for that. It's like mixing ECMAland and DOMland somehow, since an DOM element is treated like an object in ECMAscript.
    – jAndy
    Aug 4, 2010 at 17:55

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.