【js基礎修煉之路】--建立文檔碎片document.createDocumentFragment()

 

 

 

講這個方法以前，咱們應該先了解下插入節點時瀏覽器會作什麼。
         在瀏覽器中，咱們一旦把節點添加到document.body（或者其餘節點）中，頁面就會更新並反映出這個變化，對於少許的更新，一條條循環插入也會運行很好，也是咱們經常使用的方法。代碼以下：    

 

 

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下性能明顯得以提升。你們能夠本身測試下。 
前端性能優化都是從一些細節地方作起的，若是不加以注意，後果很嚴重。