JavaScript效能最佳化 建立文檔片段(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條)，如果像上面的代碼一樣，逐條添加節點，這個過程就可能會十分緩慢。
為瞭解決這個問題，我們可以引入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.body.appendChild(oFragmeng);//最後一次性添加到document中

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

PS：這個最佳化跟迴圈添加html代碼有點類似。