|
|
復制代碼 代碼如下:
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代碼有點類似。
JavaScript技術：JavaScript性能優化 創建文檔碎片(document.createDocumentFragment)，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
