亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

dom操作之文檔碎片

qingshanli1988 / 2029人閱讀

摘要：文檔碎片在日常的工作中，避免不了我們要想一個元素中插入大量的動態(tài)元素，比如在頁面中有一個，我們隨著頁面的某一個事件的觸發(fā)，需要向中插入大量的，正常的寫法為這樣是可以實現(xiàn)的，但是這樣性能就無從提起了，因為每次都重新繪制了一次，因為每次都調(diào)用了

文檔碎片

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

在頁面中有一個ul，我們隨著頁面的某一個事件的觸發(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);
}

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

var frag = document.createDocumentFragment();

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

oUl.appendChild(frag);

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

        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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/85431.html

相關(guān)文章

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

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

    skinner 評論0 收藏0

  • PJAX，站點加速之翼

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

    QiuyueZhong 評論0 收藏0

  • PJAX，站點加速之翼

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

    WilsonLiu95 評論0 收藏0

  • DocumentFragment文檔碎片

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

    codercao 評論0 收藏0

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

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

    Alan 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<