JavaScript中的文档碎片 DocumentFragement

Warren 发布于2019-08-23 14:53 / 3505人阅读

摘要：所以文档碎片其实就是一个临时的仓库。用文档碎片就不会产生这种节点，引入方法，它的作用是创建一个文档碎片，把要插入的新节点先插入它里面，然后再一次性地添加到中。代码如下先创建文档碎片先附加在文档碎片中最后一次性添加到中

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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