DocumentFragment對象

一般動態創建html元素都是創建好了直接appendChild()上去，但是如果要添加大量的元素還用這個方法的話就會導致大量的重繪以及回流，所以需要一個'緩存區'來保存創建的節點，然后再一次性添加到父節點中。這時候DocumentFragment對象就派上用場了。

看下w3c的官方說明：

DocumentFragment 節點不屬於文檔樹，繼承的 parentNode 屬性總是 null。

不過它有一種特殊的行為，該行為使得它非常有用，即當請求把一個 DocumentFragment 節點插入文檔樹時，插入的不是 DocumentFragment 自身，而是它的所有子孫節點。這使得 DocumentFragment 成了有用的占位符，暫時存放那些一次插入文檔的節點。它還有利於實現文檔的剪切、復制和粘貼操作。

重點就在於DocumentFragment 節點不屬於文檔樹。因此當把創建的節點添加到該對象時，並不會導致頁面的回流，因此性能就自然上去了。

創建該對象也簡單：

 

var fragment = document.createDocumentFragment();

 

看下實例：

<script type="text/javascript">
    var pNode,fragment = document.createDocumentFragment();
        
    for(var i=0; i<20; i++){
        pNode = document.createElement('p');
        pNode.innerHTML = i;
        fragment.appendChild(pNode);
    }
    document.body.appendChild(fragment);
    
</script>