createDocumentFragment()文檔碎片提高性能，減小渲染次數

在《javascript高級程序設計》一書的6.3.5:建立和操做節點一節中，介紹了幾種動態建立html節點的方法，其中有如下幾種常見方法：

· crateAttribute(name)：　　　　　 　　用指定名稱name建立特性節點

· createComment(text)：　　　　　　　建立帶文本text的註釋節點

· createDocumentFragment()：　　　　建立文檔碎片節點

· createElement(tagname)：　　　　　  建立標籤名爲tagname的節點

· createTextNode(text)：　　　　　　   建立包含文本text的文本節點

其中最感興趣且之前沒有接觸過的一個方法是createComment(text)方法，書中介紹說：在更新少許節點的時候能夠直接向document.body節點中添加，可是當要向document中添加大量數據是，若是直接添加這些新節點，這個過程很是緩慢，由於每添加一個節點都會調用父節點的appendChild()方法，爲了解決這個問題，能夠建立一個文檔碎片，把全部的新節點附加其上，而後把文檔碎片一次性添加到document中。

假如想建立十個段落，使用常規的方式可能會寫出這樣的代碼：

for(var i = 0 ; i < 10; i ++) {
    var p = document.createElement("p");
    var oTxt = document.createTextNode("段落" + i);
    p.appendChild(oTxt);
    document.body.appendChild(p);
}

固然，這段代碼運行是沒有問題，可是他調用了十次document.body.appendChild()，每次都要產生一次頁面渲染。這時碎片就十分有用

var oFragment = document.createDocumentFragment();
for(var i = 0 ; i < 10; i ++) {
    var p = document.createElement("p");
    var oTxt = document.createTextNode("段落" + i);
    p.appendChild(oTxt);
    oFragment.appendChild(p);<br>
}
document.body.appendChild(oFragment);

 

在這段代碼中，每一個新的<p />元素都被添加到文檔碎片中，而後這個碎片被做爲參數傳遞給appendChild()。這裏對appendChild()的調用實際上並非把文檔碎片本省追加到body元素中，而是僅僅追加碎片中的子節點，而後能夠看到明顯的性能提高，document.body.appenChild()一次替代十次，這意味着只須要進行一個內容渲染刷新。