JavaScript性能優(yōu)化 創(chuàng)建文檔碎片(document.createDocumentFragment)
更新時間：2010年07月13日 20:20:02 作者：
講這個方法之前，我們應(yīng)該先了解下插入節(jié)點(diǎn)時瀏覽器會做什么。
在瀏覽器中，我們一旦把節(jié)點(diǎn)添加到document.body（或者其他節(jié)點(diǎn)）中，頁面就會更新并反映出這個變化，對于少量的更新，一條條循環(huán)插入也會運(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ù)時(比如1w條)，如果像上面的代碼一樣，逐條添加節(jié)點(diǎn)，這個過程就可能會十分緩慢。
為了解決這個問題，我們可以引入createDocumentFragment()方法，它的作用是創(chuàng)建一個文檔碎片，把要插入的新節(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)過測試，在ie，firefox下性能明顯得以提高。大家可以自己測試下。
前端性能優(yōu)化都是從一些細(xì)節(jié)地方做起的，如果不加以注意，后果很嚴(yán)重。
PS：這個優(yōu)化跟循環(huán)添加html代碼有點(diǎn)類似。
復(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ù)時(比如1w條)，如果像上面的代碼一樣，逐條添加節(jié)點(diǎn)，這個過程就可能會十分緩慢。
為了解決這個問題，我們可以引入createDocumentFragment()方法，它的作用是創(chuàng)建一個文檔碎片，把要插入的新節(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)過測試，在ie，firefox下性能明顯得以提高。大家可以自己測試下。
前端性能優(yōu)化都是從一些細(xì)節(jié)地方做起的，如果不加以注意，后果很嚴(yán)重。
PS：這個優(yōu)化跟循環(huán)添加html代碼有點(diǎn)類似。
您可能感興趣的文章:
- js獲取元素到文檔區(qū)域document的(橫向、縱向)坐標(biāo)的兩種方法
- JavaScript入門教程(9) Document文檔對象
- JavaScript中的Document文檔對象
- JS document form表單元素操作完整示例
- JavaScript 節(jié)點(diǎn)操作 以及DOMDocument屬性和方法
- 原生js操作checkbox用document.getElementById實現(xiàn)
- JavaScript——DOM操作——Window.document對象詳解
- JavaScript基礎(chǔ)語法、dom操作樹及document對象
- JS document文檔的簡單操作完整示例
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了JS代碼實現(xiàn)頁面切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
webpack的 rquire.context用法實現(xiàn)工程自動化的方法
這篇文章主要介紹了webpack的 rquire.context用法實現(xiàn)工程自動化的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
JS函數(shù)(普通函數(shù),箭頭函數(shù))中this的指向問題詳解
這篇文章主要給大家介紹了JS中普通函數(shù)和箭頭函數(shù)的this指向，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09
在javascript中涉及字符串大小寫轉(zhuǎn)換的方法有4個：toLowerCase()、toLocaleLowerCase()、toUpperCase()及toLocaleUpperCase()。今天我們主要來用下toUpperCase()和toLowerCase()方法。2015-05-05
js 中實現(xiàn)頁面跳轉(zhuǎn)的方法(window.location和window.open的區(qū)別)2009-03-03
這篇文章主要為大家詳細(xì)介紹了如何通過D3.js實現(xiàn)繪制柱狀圖，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)D3.js有一定的幫助，需要的可以參考一下2022-11-11
斐波那契是自然界與社會中存在的一種數(shù)學(xué)規(guī)律,下面這篇文章主要給大家介紹了關(guān)于如何用typescript類型來推算斐波那契的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-01-01
這篇文章主要介紹了JS實現(xiàn)數(shù)組的增刪改查操作,結(jié)合實例形式分析了javascript針對數(shù)組的追加、獲取、刪除、添加、修改等常見操作技巧與相關(guān)注意事項,需要的朋友可以參考下2018-08-08
easyui tree帶checkbox實現(xiàn)單選的簡單實例
下面小編就為大家?guī)硪黄猠asyui tree帶checkbox實現(xiàn)單選的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
這篇文章主要展示了js仿黑客帝國字母掉落效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-08-08