欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)行很好,也是我們常用的方法。代碼如下:
復(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)似。

相關(guān)文章

  • JS代碼實(shí)現(xiàn)頁(yè)面切換效果

    JS代碼實(shí)現(xiàn)頁(yè)面切換效果

    這篇文章主要為大家詳細(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)化的方法

    這篇文章主要介紹了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ù),箭頭函數(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ě)

    JavaScript更改字符串的大小寫(xiě)

    在javascript中涉及字符串大小寫(xiě)轉(zhuǎn)換的方法有4個(gè):toLowerCase()、toLocaleLowerCase()、toUpperCase()及toLocaleUpperCase()。今天我們主要來(lái)用下toUpperCase()和toLowerCase()方法。
    2015-05-05
  • javascript 頁(yè)面跳轉(zhuǎn)方法集合

    javascript 頁(yè)面跳轉(zhuǎn)方法集合

    js 中實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的方法(window.location和window.open的區(qū)別)
    2009-03-03
  • D3.js實(shí)現(xiàn)繪制柱狀圖的教程詳解

    D3.js實(shí)現(xiàn)繪制柱狀圖的教程詳解

    這篇文章主要為大家詳細(xì)介紹了如何通過(guò)D3.js實(shí)現(xiàn)繪制柱狀圖,文中的示例代碼講解詳細(xì),對(duì)我們學(xué)習(xí)D3.js有一定的幫助,需要的可以參考一下
    2022-11-11
  • 教你用typescript類(lèi)型來(lái)推算斐波那契

    教你用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ù)組的增刪改查操作示例

    這篇文章主要介紹了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í)例

    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ó)字母掉落效果代碼分享

    js仿黑客帝國(guó)字母掉落效果代碼分享

    這篇文章主要展示了js仿黑客帝國(guó)字母掉落效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2015-08-08

最新評(píng)論