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

Question

我最好移动从服务器发送下来的节点还是插入它？

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

什么

大列表1 = 200里节点

大列表2 = 1000立节点

实施例：

插入：

<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中。至少对于大数据集。

即使这样，重绘速度可能会很慢，特别是在复杂CSS的IE上。

Answer 2

两个是相同的。如果你看看源代码，你可以看到'insertBefore'只映射到'before'之前。

REF为 '的insertBefore'：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