文檔碎片是什麽：

如果我們要在一個ul中添加100個li，如果不使用文檔碎片，那麽我們就需要使用append經常100次的追加，這會導致瀏覽器一直不停的渲染，是非常消耗資源的。但是如果我們使用文檔碎片了，我們可以先將100個li添加到文檔碎片中，然後直接把這個文檔碎片追加到ul中即可。所以文檔碎片其實就是一個臨時的倉庫。

如下代碼在document.body中添加5個span

for(var i=0;i<5;i++)

{ 

    var op = document.createElement("span"); 

    var oText = document.createTextNode(i); 

    op.appendChild(oText); 

    document.body.appendChild(op); 

} 
 

對於少量的更新，一條條循環插入的運行也還可以。但是，當要向document中添加大量數據（比如1w條），如果像上面的代碼一樣，逐條添加節點，整個過程會十分緩慢，性能極差。

也可以建一個新的節點，例如div，先將span添加到div上，然後再將div添加到body

var oDiv = document.createElement("div"); 


for(var i=0;i<10000;i++)

{ 

    var op = document.createElement("span"); 

    var oText = document.createTextNode(i); 

    op.appendChild(oText); 


    oDiv.appendChild(op);  

} 


document.body.appendChild(oDiv); 
 

但這樣會在body中多添加一個div節點。用文檔碎片就不會產生這種節點，引入createDocumentFragement()方法，它的作用是創建一個文檔碎片，把要插入的新節點先插入它裏面，然後再一次性地添加到

document中。代碼如下：

//先創建文檔碎片

var oFragmeng = document.createDocumentFragment(); 


for(var i=0;i<10000;i++)

{ 

    var op = document.createElement("span"); 

    var oText = document.createTextNode(i); 

    op.appendChild(oText); 

    
 
//先附加在文檔碎片中

    oFragmeng.appendChild(op);  

} 


//最後一次性添加到document中

document.body.appendChild(oFragmeng); 

JS JavaScript中的文檔碎片 DocumentFragement JS性能優化