jQuery的性能

想象你必须做很多DOM操作（在我的情况下，它是一种动态列表）。jQuery的性能

请看下面的例子：

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对象阵列。

“$根”是一个UL元素

此代码后是会发生什么事，无论UL的是动画（滚动），最后，执行该代码的动画的回调中：

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

这工作得很好，我唯一能做的就是表演。我会缓存我正在放置的所有DOM元素。没有深入研究jQuery的源代码，我的性能问题是否存在？

jQuery使用DocumentFragments来附加事物吗？

如果创建

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

一个新的DOM元素，只在该点存储在内存中是不是？

来源

2010-04-19 jAndy

我几天前也遇到了同样的问题。它的，如果你做这种方式要快得多：

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对象，你不需要reslect它的insertAfter）

来源

2010-04-19 11:24:10 meo

好，它确实这样做更快。不幸的是，我不能这样做，因为pages [pindex]包含带有.data和事件处理程序的jQuery对象。但无论如何+1。 – jAndy 2010-04-19 11:49:15

一个接一个地创建DOM节点通常比创建一个HTML字符串并让浏览器处理它（通过innerHTML）要慢。这里有关于这个的more details。

来源

2010-04-19 10:40:30 elias

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

请参阅http://www.sitepen.com/blog/2008/05/09/string-performance-an-analysis/关于字符串性能。

来源

2010-04-19 10:46:07 Oleg

有一个slide from John Resig（jQuery创建者），他说jQuery确实在内部使用文档片段。在下面的幻灯片中，他简要地解释了如何构建一个轻量级的文档片段并将其附加到一个操作中，指出这个“ends up being really fast”。如果您还没有（如您自己提及文档片段），您可能需要考虑这一点。

至于与$('<div>')创建新元素的过程中，documentation说：

但如果字符串的似乎是一个HTML片段，jQuery的尝试由HTML描述来创建新的DOM元素。然后创建并返回一个引用这些元素的jQuery对象。

如果您为更复杂的html代码片段提供单一标签和“浏览器的innerHTML机制”，jQuery将使用“原生JavaScript createElement（）函数”。

来源

2010-04-19 10:49:53 Wolfram

jQuery的性能

回答

相关问题