jQuery performance

Posted by jAndy on Stack Overflow See other posts from Stack Overflow or by jAndy
Published on 2010-04-19T10:21:56Z Indexed on 2010/04/19 10:23 UTC
Read the original article Hit count: 437

Filed under:
|

Hi Folks,

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?

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about JavaScript