jQuery performance

Question

imagine you have to do DOM manipulation like a lot (in my case, it's kind of a dynamic list).

Look at this example:

var $buffer = $('<ul/>', {
                'class': '.custom-example',
  'css':  {
   'position':  'absolute',
   'top':   '500px'
  }
           });

$.each(pages[pindex], function(i, v){
 $buffer.append(v);
});

$buffer.insertAfter($root);

"pages" is an array which holds LI elements as jQuery object.

"$root" is an UL element

What happens after this code is, both UL's are animated (scrolling) and finally, within the callback of animate this code is executed:

$root.detach();
$root = $buffer;
$root.css('top', '0px');
$buffer = null;

This works very well, the only thing I'm pi**ed off is the performance. I do cache all DOM elements I'm laying a hand on. Without looking too deep into jQuery's source code, is there a chance that my performance issues are located there?

Does jQuery use DocumentFragments to append things?

If you create a new DOM element with

var new = $('<div/>') 

it is only stored in memory at this point isnt it?

Answer 1

If you think about performance, you should construct you whole <ul> element with all <li> subelements as a string. Use " += " operation for the string concatenations. At the end use jQuery to insert constructed string inside your web page.

See http://www.sitepen.com/blog/2008/05/09/string-performance-an-analysis/ about string performance.

Answer 2

There is a slide from John Resig (jQuery creator) where he says that jQuery does in fact use document fragments internally. On the following slides he explains briefly how to build up a lightweight document fragment and append it in one operation stating that this " ends up being really fast ". You might want to look into that, if you did not already (as you mention document fragments yourself).

As for the process of creating new elements with $('<div>') , the documentation says:

But if the string appears to be an HTML snippet, jQuery attempts to create new DOM elements as described by the HTML. Then a jQuery object is created and returned that refers to these elements.

jQuery uses "the native JavaScript createElement() function" if you provide a single tag and "the browser's innerHTML mechanism" for more complex html snippets.

Answer 3

I had the same problem just a few days ago. Its much faster if you do it this way:

var buffer = $('<ul class="custom-example" style="position: absolute; top:500px"></ul>')

var html = ''

$.each(pages[pindex], function(i, v){
   html += v
});

buffer.html(html)

buffer.insertAfter($root);

(be careful: in your example buffer is already a jquery object, you don't need to reslect it for the insertAfter)

Answer 4

Creating DOM nodes one by one is usually slower than creating a HTML string and let the browser process it (via innerHTML). Here are more details about this.