dom操作之文檔碎片

qingshanli1988 發布于2019-08-21 10:23 / 1972人閱讀

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

文檔碎片

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

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

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

var frag = document.createDocumentFragment();

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

oUl.appendChild(frag);

這樣也就觸發了一次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);

當然你也可以使用字符串拼接的方式，我在這里就不在復述了！

GPU云服務器云服務器 DOM文檔 Dom操作 dom對象操作 DOM交互操作

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85431.html

當我調用了$().append()后，jQuery內部發生了什么？

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

skinner 2019-08-23 16:29 評論0 收藏0
PJAX，站點加速之翼

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

QiuyueZhong 2019-06-27 14:55 評論0 收藏0
PJAX，站點加速之翼

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

WilsonLiu95 2019-08-22 10:44 評論0 收藏0
DocumentFragment文檔碎片

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

codercao 2019-08-26 10:29 評論0 收藏0
基于Vue的MVVM學習筆記

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

Alan 2019-08-23 18:07 評論0 收藏0