JavaScript性能優(yōu)化 創(chuàng)建文檔碎片(document.createDocumentFragment)
更新時(shí)間:2010年07月13日 20:20:02 作者:
講這個(gè)方法之前,我們應(yīng)該先了解下插入節(jié)點(diǎn)時(shí)瀏覽器會(huì)做什么。
在瀏覽器中,我們一旦把節(jié)點(diǎn)添加到document.body(或者其他節(jié)點(diǎn))中,頁(yè)面就會(huì)更新并反映出這個(gè)變化,對(duì)于少量的更新,一條條循環(huán)插入也會(huì)運(yùn)行很好,也是我們常用的方法。代碼如下:
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中。代碼如下:
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é)地方做起的,如果不加以注意,后果很?chē)?yán)重。
PS:這個(gè)優(yōu)化跟循環(huán)添加html代碼有點(diǎn)類(lèi)似。
復(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é)地方做起的,如果不加以注意,后果很?chē)?yán)重。
PS:這個(gè)優(yōu)化跟循環(huán)添加html代碼有點(diǎn)類(lèi)似。
您可能感興趣的文章:
- js獲取元素到文檔區(qū)域document的(橫向、縱向)坐標(biāo)的兩種方法
- JavaScript入門(mén)教程(9) Document文檔對(duì)象
- JavaScript中的Document文檔對(duì)象
- JS document form表單元素操作完整示例
- JavaScript 節(jié)點(diǎn)操作 以及DOMDocument屬性和方法
- 原生js操作checkbox用document.getElementById實(shí)現(xiàn)
- JavaScript——DOM操作——Window.document對(duì)象詳解
- JavaScript基礎(chǔ)語(yǔ)法、dom操作樹(shù)及document對(duì)象
- JS document文檔的簡(jiǎn)單操作完整示例
相關(guān)文章
webpack的 rquire.context用法實(shí)現(xiàn)工程自動(dòng)化的方法
這篇文章主要介紹了webpack的 rquire.context用法實(shí)現(xiàn)工程自動(dòng)化的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02JS函數(shù)(普通函數(shù),箭頭函數(shù))中this的指向問(wèn)題詳解
這篇文章主要給大家介紹了JS中普通函數(shù)和箭頭函數(shù)的this指向,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09javascript 頁(yè)面跳轉(zhuǎn)方法集合
js 中實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的方法(window.location和window.open的區(qū)別)2009-03-03教你用typescript類(lèi)型來(lái)推算斐波那契
斐波那契是自然界與社會(huì)中存在的一種數(shù)學(xué)規(guī)律,下面這篇文章主要給大家介紹了關(guān)于如何用typescript類(lèi)型來(lái)推算斐波那契的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-01-01JS實(shí)現(xiàn)數(shù)組的增刪改查操作示例
這篇文章主要介紹了JS實(shí)現(xiàn)數(shù)組的增刪改查操作,結(jié)合實(shí)例形式分析了javascript針對(duì)數(shù)組的追加、獲取、刪除、添加、修改等常見(jiàn)操作技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2018-08-08easyui tree帶checkbox實(shí)現(xiàn)單選的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇easyui tree帶checkbox實(shí)現(xiàn)單選的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11