jQuery性能

Question

想象您必须做很多DOM操作（就我而言，它是一个动态列表）。

看这个例子：

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

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

$buffer.insertAfter($root);

“页面”是一个数组，将LI元素保存为jQuery对象。

“ $ root”是UL元素

这段代码之后发生的事情是，两个UL都进行了动画处理（滚动），最后，在动画的回调中执行了以下代码：

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

效果很好，我唯一想得到的就是性能。 我确实缓存了所有要使用的DOM元素。 在不深入研究jQuery源代码的情况下，是否有可能出现我的性能问题？

jQuery是否使用DocumentFragments附加内容？

如果您使用创建新的DOM元素

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

它现在只存储在内存中吗？

Answer 1

如果您考虑性能，则应将所有<li>子元素作为字符串构造整个<ul>元素。 对字符串串联使用“ + = ”操作。 最后，使用jQuery在网页内插入构造的字符串。

有关字符串性能的信息，请参见http://www.sitepen.com/blog/2008/05/09/string-performance-an-analysis/ 。

Answer 2

John Resig （jQuery的创建者）有一张幻灯片 ，他说jQuery实际上确实在内部使用文档片段。 在下面的幻灯片中，他简要地解释了如何构建一个轻量级的文档片段，并将其附加到一个操作中，说明此操作“ 最终变得非常快 ”。 如果您还没有这样做的话，您可能想研究一下（正如您自己提到的文档片段）。

至于使用$('<div>')创建新元素的过程， 文档说：

但是，如果该字符串看起来像是HTML代码段，则jQuery尝试创建HTML所描述的新DOM元素。 然后，创建并返回一个引用这些元素的jQuery对象。

如果您提供单个标记，则jQuery使用“本机JavaScript createElement（）函数”，而对于更复杂的html代码段，则使用“浏览器的innerHTML机制”。

Answer 3

几天前我也遇到了同样的问题。 如果这样做的话，速度会更快：

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);

（注意：在您的示例缓冲区中，缓冲区已经是一个jquery对象，您无需为insertAfter更改它）

Answer 4

通常一一创建DOM节点要比创建HTML字符串并使浏览器（通过innerHTML）对其进行处理要慢。 这是有关此的更多详细信息。