什么是更快的DOM插入或操作？

Question

我最好移动我从服务器发送的节点或插入它吗？

我正在使用jQuery（1.4），但我想知道jQuery和JS。在这种情况下，节点很小，只有一个孩子。但是，如果它是一个大型列表呢？

什么

大型列表1 = 200个li节点

大型列表2 = 1000个li节点

示例：

插入：

<div id="wrap">
  <div id="box></div>
</div>

$('#box').before($('<ul id="list"><li>...</ul>')); 

VS

操纵：

<div id="wrap">
  <div id="box></div>
</div>
<ul id="list"><li>...</ul>

$('#list').insertBefore($('#box'));

Answer 1

客户端将花费更多时间来渲染新项目，而不是实际将它们放入DOM中。我建议您完全从DOM中删除#list，将项目添加到DOM中，然后将其放回DOM中。至少对于大型数据集。

即使这样，重绘也可能很慢，特别是在具有复杂CSS的IE上。

Answer 2

两者是一样的。如果查看源代码，可以看到'insertBefore'仅映射到'before'。

'insertBefore'的REF：http://gist.github.com/277432#LID4389

'之前'的REF：http://gist.github.com/277432#LID4088

Answer 3

提高性能的一种方法是为插入提供上下文。

在执行$('#list').insertBefore($('#box'));时，您应该提供上下文节点（如果有），而不是研究整个树。类似于

的东西

var myWapper = getWrapperFromEventOrWhereEverYouMightHaveIt();

//more code doing fancy things here

$(myWrapper, '#list').insertBefore($('#box')); 

Answer 4

如果从服务器获取数据时更新整个列表，那么您应该有一个类似于以下内容的结构：

<div id="wrap">
  <ul id="list"></ul>
  <div id="box></div>
</div>

然后，您可以将所有节点作为li元素列表发送，然后执行以下操作：

$("list")[0].innerHTML = xhr.responseText // response text is of form 
                                          //<li>item</li><li>item</li>... etc

测试表明，innerHTML比附加，插入（前后）等更快。 http://www.quirksmode.org/dom/innerhtml.html