講這個方法之前，我們應該先了解下插入節點時瀏覽器會做什么。
???????? 在瀏覽器中，我們一旦把節點添加到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下性能明顯得以提高。大家可以自己測試下。?
前端性能優化都是從一些細節地方做起的，如果不加以注意，后果很嚴重。

PS：這個優化跟循環添加html代碼有點類似。

總結

以上是生活随笔為你收集整理的JS性能优化之文档碎片-document.createDocumentFragment的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。