文件碎片是什麼：

如果我們要在一個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);