前端優化--創建文檔碎片(document.createDocumentFragment())

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,先將oP添加到div上,然後再將div添加到body中.但這樣要在body中多添加一個<div></div>.但文檔碎片不會產生這種節點.

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); 

為瞭解決這個問題，我們可以引入createDocumentFragment()方法，它的作用是創建一個文檔碎片，把要插入的新節點先附加在它上面，然後再一次性添加到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); 

經過測試，在ie，firefox下性能明顯得以提高。大家可以自己測試下。 
前端性能優化都是從一些細節地方做起的，如果不加以註意，後果很嚴重。