如何優化批量修改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)