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

JavaScript性能優(yōu)化 創(chuàng)建文檔碎片(document.createDocumentFragment)

 更新時(shí)間：2010年07月13日 20:20:02   作者：  
講這個(gè)方法之前，我們應(yīng)該先了解下插入節(jié)點(diǎn)時(shí)瀏覽器會做什么。
在瀏覽器中，我們一旦把節(jié)點(diǎn)添加到document.body（或者其他節(jié)點(diǎn)）中，頁面就會更新并反映出這個(gè)變化，對于少量的更新，一條條循環(huán)插入也會運(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è)過程就可能會十分緩慢。
為了解決這個(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)過測試，在ie，firefox下性能明顯得以提高。大家可以自己測試下。
前端性能優(yōu)化都是從一些細(xì)節(jié)地方做起的，如果不加以注意，后果很嚴(yán)重。

PS：這個(gè)優(yōu)化跟循環(huán)添加html代碼有點(diǎn)類似。

相關(guān)文章

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

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

    這篇文章主要為大家詳細(xì)介紹了JS代碼實(shí)現(xiàn)頁面切換效果，文中示例代碼介紹的非常詳細(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)化的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-02-02
  • JS函數(shù)(普通函數(shù),箭頭函數(shù))中this的指向問題詳解

    JS函數(shù)(普通函數(shù),箭頭函數(shù))中this的指向問題詳解

    這篇文章主要給大家介紹了JS中普通函數(shù)和箭頭函數(shù)的this指向，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-09-09
  • JavaScript更改字符串的大小寫

    JavaScript更改字符串的大小寫

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

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

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

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

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

    教你用typescript類型來推算斐波那契

    斐波那契是自然界與社會中存在的一種數(shù)學(xué)規(guī)律,下面這篇文章主要給大家介紹了關(guān)于如何用typescript類型來推算斐波那契的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-01-01
  • JS實(shí)現(xiàn)數(shù)組的增刪改查操作示例

    JS實(shí)現(xiàn)數(shù)組的增刪改查操作示例

    這篇文章主要介紹了JS實(shí)現(xiàn)數(shù)組的增刪改查操作,結(jié)合實(shí)例形式分析了javascript針對數(shù)組的追加、獲取、刪除、添加、修改等常見操作技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下
    2018-08-08
  • easyui tree帶checkbox實(shí)現(xiàn)單選的簡單實(shí)例

    easyui tree帶checkbox實(shí)現(xiàn)單選的簡單實(shí)例

    下面小編就為大家?guī)硪黄猠asyui tree帶checkbox實(shí)現(xiàn)單選的簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-11-11
  • js仿黑客帝國字母掉落效果代碼分享

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

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

最新評論