Javascript -- document的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中。
假如想創建十個段落，使用常規的方式可能會寫出這樣的代碼：
| 1 2 3 4 5 6 |
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()，每次都要產生一次頁面渲染。這時碎片就十分有用了：
| 1 |
var oFragment = document.createDocumentFragment(); |
| 1 2 3 4 5 |
for(var i = 0 ; i < 10; i ++) {
var p = document.createElement("p");
var oTxt = document.createTextNode("段落" + i);
p.appendChild(oTxt);
oFragment.appendChild(p);<br>}
|
| 1 |
document.body.appendChild(oFragment);
|
在這段代碼中，每個新的<p />元素都被添加到文檔碎片中，然後這個碎片被作為參數傳遞給appendChild()。這裏對appendChild()的調用實際上並不是把文檔碎片本省追加到body元素中，而是僅僅追加碎片中的子節點，然後可以看到明顯的性能提升，document.body.appenChild()一次替代十次，這意味著只需要進行一個內容渲染刷新。
Javascript -- document的createDocumentFragment()方法