JavaScript中的文檔碎片 DocumentFragement

Warren 發布于2019-08-23 14:53 / 3512人閱讀

摘要：所以文檔碎片其實就是一個臨時的倉庫。用文檔碎片就不會產生這種節點，引入方法，它的作用是創建一個文檔碎片，把要插入的新節點先插入它里面，然后再一次性地添加到中。代碼如下先創建文檔碎片先附加在文檔碎片中最后一次性添加到中

JavaScript中的文檔碎片 DocumentFragement 文檔碎片是什么：

如果我們要在一個ul中添加100個li，如果不使用文檔碎片，那么我們就需要使用append經常100次的追加，這會導致瀏覽器一直不停的渲染，是非常消耗資源的。但是如果我們使用文檔碎片了，我們可以先將100個li添加到文檔碎片中，然后直接把這個文檔碎片追加到ul中即可。所以文檔碎片其實就是一個臨時的倉庫。
如下代碼在document.body中添加5個span：

for(var i=0;i<5;i++)
{ 
    var op = document.createElement("span"); 
    var oText = document.createTextNode(i); 
    op.appendChild(oText); 
    document.body.appendChild(op); 
}

對于少量的更新，一條條循環插入的運行也還可以。但是，當要向document中添加大量數據（比如1w條），如果像上面的代碼一樣，逐條添加節點，整個過程會十分緩慢，性能極差。
也可以建一個新的節點，例如div，先將span添加到div上，然后再將div添加到body:

var oDiv = document.createElement("div"); 
for(var i=0;i<10000;i++)
{ 
    var op = document.createElement("span"); 
    var oText = document.createTextNode(i); 
    op.appendChild(oText); 
    oDiv.appendChild(op);  
} 
document.body.appendChild(oDiv);

但這樣會在body中多添加一個div節點。用文檔碎片就不會產生這種節點，引入createDocumentFragement()方法，它的作用是創建一個文檔碎片，把要插入的新節點先插入它里面，然后再一次性地添加到document中。
代碼如下：

//先創建文檔碎片

var oFragmeng = document.createDocumentFragment(); 


for(var i=0;i<10000;i++)

{ 

    var op = document.createElement("span"); 

    var oText = document.createTextNode(i); 

    op.appendChild(oText); 

    //先附加在文檔碎片中

    oFragmeng.appendChild(op);  

} 


//最后一次性添加到document中

document.body.appendChild(oFragmeng);

云服務器 GPU云服務器手機文檔中的html javascript文檔 DocumentFragement 教程文檔javascript

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

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

基于Vue的MVVM學習筆記

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

Alan 2019-08-23 18:07 評論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