|
|
復(fù)制代碼 代碼如下:
for(var i=0;i<5;i++){
var op = document.createElement("span");
var oText = document.createTextNode(i);
op.appendChild(oText);
document.body.appendChild(op);
}
但是，如果當(dāng)我們要向document中添加大量數(shù)據(jù)時(shí)(比如1w條)，如果像上面的代碼一樣，逐條添加節(jié)點(diǎn)，這個(gè)過(guò)程就可能會(huì)十分緩慢。
為了解決這個(gè)問(wèn)題，我們可以引入createDocumentFragment()方法，它的作用是創(chuàng)建一個(gè)文檔碎片，把要插入的新節(jié)點(diǎn)先附加在它上面，然后再一次性添加到document中。代碼如下：
復(fù)制代碼 代碼如下:
var oFragmeng = document.createDocumentFragment(); //先創(chuàng)建文檔碎片
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中
經(jīng)過(guò)測(cè)試，在ie，firefox下性能明顯得以提高。大家可以自己測(cè)試下。
前端性能優(yōu)化都是從一些細(xì)節(jié)地方做起的，如果不加以注意，后果很嚴(yán)重。
PS：這個(gè)優(yōu)化跟循環(huán)添加html代碼有點(diǎn)類似。
JavaScript技術(shù)：JavaScript性能優(yōu)化 創(chuàng)建文檔碎片(document.createDocumentFragment)，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
