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>