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)文章
這篇文章主要為大家詳細(xì)介紹了JS代碼實(shí)現(xiàn)頁(yè)面切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
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-02
JS函數(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-09
在javascript中涉及字符串大小寫(xiě)轉(zhuǎn)換的方法有4個(gè)：toLowerCase()、toLocaleLowerCase()、toUpperCase()及toLocaleUpperCase()。今天我們主要來(lái)用下toUpperCase()和toLowerCase()方法。2015-05-05
javascript 頁(yè)面跳轉(zhuǎn)方法集合
js 中實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的方法(window.location和window.open的區(qū)別)2009-03-03
這篇文章主要為大家詳細(xì)介紹了如何通過(guò)D3.js實(shí)現(xiàn)繪制柱狀圖，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)D3.js有一定的幫助，需要的可以參考一下2022-11-11
教你用typescript類(lèi)型來(lái)推算斐波那契
斐波那契是自然界與社會(huì)中存在的一種數(shù)學(xué)規(guī)律,下面這篇文章主要給大家介紹了關(guān)于如何用typescript類(lèi)型來(lái)推算斐波那契的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-01-01
JS實(shí)現(xiàn)數(shù)組的增刪改查操作示例
這篇文章主要介紹了JS實(shí)現(xiàn)數(shù)組的增刪改查操作,結(jié)合實(shí)例形式分析了javascript針對(duì)數(shù)組的追加、獲取、刪除、添加、修改等常見(jiàn)操作技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2018-08-08
easyui 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
這篇文章主要展示了js仿黑客帝國(guó)字母掉落效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-08-08