成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

dom操作之文檔碎片

qingshanli1988 / 1980人閱讀

摘要：文檔碎片在日常的工作中，避免不了我們要想一個(gè)元素中插入大量的動(dòng)態(tài)元素，比如在頁面中有一個(gè)，我們隨著頁面的某一個(gè)事件的觸發(fā)，需要向中插入大量的，正常的寫法為這樣是可以實(shí)現(xiàn)的，但是這樣性能就無從提起了，因?yàn)槊看味贾匦吕L制了一次，因?yàn)槊看味颊{(diào)用了

文檔碎片

在日常的工作中，避免不了我們要想一個(gè)元素中插入大量的動(dòng)態(tài)元素，比如：

在頁面中有一個(gè)ul，我們隨著頁面的某一個(gè)事件的觸發(fā)，需要向#box中插入大量的li，正常的寫法為：

var oUl = document.querySelectorAll("#box")[0];
        for(var i=0;i<1000;i++){
            var oLi = document.createElement("li");
            var t = document.createTextNode(i+"");
            oLi.appendChild(t);
            oUl.appendChild(oLi);
}

這樣是可以實(shí)現(xiàn)的，但是這樣性能就無從提起了，因?yàn)槊看蝟Ul都重新繪制了一次，因?yàn)槊看蝟Ul都調(diào)用了appendChild方法，所以，就要借助一個(gè)叫文檔碎片的東西，創(chuàng)建一個(gè)文檔碎片：

var frag = document.createDocumentFragment();

然后再通過oUl加入文檔碎片：

oUl.appendChild(frag);

這樣也就觸發(fā)了一次oUl的重新繪制,性能上會(huì)大大提高，完整代碼：

        var frag = document.createDocumentFragment(),
            oLi = null,
            t = "",
            oUl = document.querySelectorAll("#box")[0];
        for(var i = 0;i < 1000;i++){
            oLi = document.createElement("li");
            t = document.createTextNode(i + "");
            oLi.appendChild(t);
            frag.appendChild(oLi);
        }
        console.log(frag);
        oUl.appendChild(frag);

當(dāng)然你也可以使用字符串拼接的方式，我在這里就不在復(fù)述了！

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/85431.html

相關(guān)文章

  • 當(dāng)我調(diào)用了$().append()后，jQuery內(nèi)部發(fā)生了什么？

    摘要：它的作用是是用來處理等操作方法的參數(shù)的，統(tǒng)一將其處理為類型節(jié)點(diǎn)，并交由函數(shù)處理，即上圖的。作用將返回的插入到的內(nèi)部末尾。方法創(chuàng)建了一虛擬的節(jié)點(diǎn)對(duì)象，節(jié)點(diǎn)對(duì)象包含所有屬性和方法。 showImg(https://segmentfault.com/img/remote/1460000018678706?w=1106&h=535); 前言：這篇我們倒著講 1、有這樣一個(gè)頁面： app...

    skinner 評(píng)論0 收藏0

  • PJAX，站點(diǎn)加速之翼

    摘要：是一款可愛的小插件，將和瀏覽器的封裝到一起，解決了單純使用進(jìn)行無刷新加載時(shí)對(duì)搜索引擎的不友好，并且節(jié)省了開支提高了瀏覽速度，明顯地優(yōu)化了用戶體驗(yàn)。是提供的，是對(duì)瀏覽器歷史對(duì)象的增強(qiáng)。 showImg(https://segmentfault.com/img/remote/1460000007640529?w=1008&h=569); pjax 是一款可愛的 jQuery 小插件，將 a...

    QiuyueZhong 評(píng)論0 收藏0

  • PJAX，站點(diǎn)加速之翼

    摘要：是一款可愛的小插件，將和瀏覽器的封裝到一起，解決了單純使用進(jìn)行無刷新加載時(shí)對(duì)搜索引擎的不友好，并且節(jié)省了開支提高了瀏覽速度，明顯地優(yōu)化了用戶體驗(yàn)。是提供的，是對(duì)瀏覽器歷史對(duì)象的增強(qiáng)。 showImg(https://segmentfault.com/img/remote/1460000007640529?w=1008&h=569); pjax 是一款可愛的 jQuery 小插件，將 a...

    WilsonLiu95 評(píng)論0 收藏0

  • DocumentFragment文檔碎片

    摘要：在樹中，文檔片段被其所有的孩子所代替。因?yàn)槲臋n片段存在于內(nèi)存中，并不在樹中，所以將子元素插入到文檔片段時(shí)不會(huì)引起頁面回流對(duì)元素位置和幾何上的計(jì)算。因此，使用文檔片段通常會(huì)起到優(yōu)化性能的作用。在里說過接口表示文檔的一部分或一段。 DocumentFragments 是DOM節(jié)點(diǎn)。它們不是主DOM樹的一部分。通常的用例是創(chuàng)建文檔片段，將元素附加到文檔片段，然后將文檔片段附加到DOM樹。在D...

    codercao 評(píng)論0 收藏0

  • 基于Vue的MVVM學(xué)習(xí)筆記

    摘要：發(fā)布訂閱現(xiàn)在每個(gè)人應(yīng)該都用微信吧，一個(gè)人可以關(guān)注多個(gè)公眾號(hào)，多個(gè)人可以同時(shí)關(guān)注相同的公眾號(hào)。公眾號(hào)每周都會(huì)更新內(nèi)容，并推送給我們，把寫好的文章在微信管理平臺(tái)更新就好了，點(diǎn)擊推送，就相當(dāng)于發(fā)布。 什么是MVVM MVVM——Model-View-ViewModle的縮寫，MVC設(shè)計(jì)模式的改進(jìn)版。Model是我們應(yīng)用中的數(shù)據(jù)模型，View是我們的UI層，通過ViewModle，可以把我們M...

    Alan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<