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è)過程就可能會(huì)十分緩慢。
為了解決這個(gè)問題，我們可以引入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)過測(cè)試，在ie，firefox下性能明顯得以提高。大家可以自己測(cè)試下。
前端性能優(yōu)化都是從一些細(xì)節(jié)地方做起的，如果不加以注意，后果很嚴(yán)重。
PS：這個(gè)優(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ù)時(shí)(比如1w條)，如果像上面的代碼一樣，逐條添加節(jié)點(diǎn)，這個(gè)過程就可能會(huì)十分緩慢。
為了解決這個(gè)問題，我們可以引入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)過測(cè)試，在ie，firefox下性能明顯得以提高。大家可以自己測(cè)試下。
前端性能優(yōu)化都是從一些細(xì)節(jié)地方做起的，如果不加以注意，后果很嚴(yán)重。
PS：這個(gè)優(yōu)化跟循環(huán)添加html代碼有點(diǎn)類似。
您可能感興趣的文章:
- js獲取元素到文檔區(qū)域document的(橫向、縱向)坐標(biāo)的兩種方法
- JavaScript入門教程(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操作樹及document對(duì)象
- JS document文檔的簡(jiǎn)單操作完整示例
相關(guān)文章
Javascript動(dòng)態(tài)創(chuàng)建表格及刪除行列的方法
這篇文章主要介紹了Javascript動(dòng)態(tài)創(chuàng)建表格及刪除行列的方法,涉及javascript動(dòng)態(tài)操作表格的相關(guān)技巧,需要的朋友可以參考下2015-05-05
這篇文章主要幫助大家輕松掌握J(rèn)avaScript享元模式，告訴大家想什么是js享元模式，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要為大家詳細(xì)介紹了用JS常用幾個(gè)算法的實(shí)現(xiàn)代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
基于JS實(shí)現(xiàn)任務(wù)隊(duì)列的示例代碼
顧名思義,任務(wù)隊(duì)列就是存放任務(wù)的隊(duì)列,隊(duì)列中的任務(wù)都嚴(yán)格按照進(jìn)入隊(duì)列的先后順序執(zhí)行,所以下面我們就來(lái)看看如何基于JS實(shí)現(xiàn)任務(wù)隊(duì)列吧2023-08-08
javascript數(shù)組去重3種方法的性能測(cè)試與比較
面試題中有一題數(shù)組去重，首先想到的是對(duì)象存鍵值的方法可是遇到不同類型又能轉(zhuǎn)換成同樣的字符串的就完了接下來(lái)為大家介紹下雙重循環(huán)/存鍵值和類型實(shí)現(xiàn)去重，感興趣的各位可以參考下哈2013-03-03
JavaScript如何處理移動(dòng)端拍攝圖片旋轉(zhuǎn)問題
這篇文章主要告訴大家JavaScript如何處理移動(dòng)端拍攝圖片旋轉(zhuǎn)問題，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
基于 Bootstrap Datetimepicker 聯(lián)動(dòng)
這篇文章主要介紹了基于bootstrap datetimepicker 聯(lián)動(dòng)效果,需要的朋友可以參考下2017-08-08
兩個(gè)函數(shù)相互調(diào)用如何防止死循環(huán)
這篇文章主要介紹了兩個(gè)函數(shù)相互調(diào)用如何防止死循環(huán)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
js實(shí)現(xiàn)指定時(shí)間倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)指定時(shí)間倒計(jì)時(shí)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08
js模仿微信朋友圈計(jì)算時(shí)間顯示幾天/幾小時(shí)/幾分鐘/幾秒之前
本篇文章主要介紹了js模仿微信朋友圈計(jì)算時(shí)間顯示幾天/幾小時(shí)/幾分鐘/幾秒之前的實(shí)例。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04