如何优化批量修改DOM的操作

当需要对DOM元素进行一系列操作时，可以通过以下步骤来减少重绘和重排的次数：

1、使元素脱离文档流；

2、对其应用多重DOM改变；

3、把元素带回到元文档中。

该过程会触发两次重排（reflow），如果忽略这两个操作，则第二部操作会造成多次重排。

如何使元素脱离文档流：

1、隐藏元素，DOM修改，重新显示；

      这里主要通过display属性达到

2、使用文档片段（document fragment）在当前DOM之外构建一个子树，再把它拷贝到原文档中；

      当你想提取文档的一部分，改变，增加，或删除某些内容及插入到文档末尾可以使用createDocumentFragment() 方法，可以防止文档结构被破坏

3、将原始元素拷贝到一个脱离文档的节点中，修改副本，完成后再替换原始元素

      这里主要通过cloneNode()方法来实现

具体的例子如下：

<ul id="mylist">
    <li><a href="1">first</a></li>
    <li><a href="2">second</a></li>
</ul>

附加的数据定义如下：

var data=[
        {
            'name':"third",
            'url':"3"
        },
        {
            'name':'forth',
            'url':'4'
        }
    ]; 

下面指定一个更新节点数据的通用方法：

function appendDataToElement(appendToElement,data){
    var a,li;
    for (var i = 0,max=data.length; i < max; i++) {
        a=document.createElement('a');
        a.href=data[i].url;
        a.appendChild(document.createTextNode(data[i].name));
        li=document.createElement('li');
        li.appendChild(a);
        appendToElement.appendChild(li)
    }
}

方法1：借助display属性

var ul=document.getElementById('mylist');
ul.style.display='none'
appendDataToElement(ul,data);
ul.style.display='block';

方法2：借助文档片段（document fragment）（推荐使用，产生的DOM遍历和重排次数最少）

var fragment=document.createDocumentFragment();
appendDataToElement(fragment,data);
document.getElementById('mylist').appendChild(fragment);

方法3：借助cloneNode方法

var old=document.getElementById('mylist');
var clone=old.cloneNode(true);
appendDataToElement(clone,data);
old.parentNode.replaceChild(clone,old)