dom操作之文档碎片

qingshanli1988 发布于2019-08-21 10:23 / 1899人阅读

摘要：文档碎片在日常的工作中，避免不了我们要想一个元素中插入大量的动态元素，比如在页面中有一个，我们随着页面的某一个事件的触发，需要向中插入大量的，正常的写法为这样是可以实现的，但是这样性能就无从提起了，因为每次都重新绘制了一次，因为每次都调用了

文档碎片

在日常的工作中，避免不了我们要想一个元素中插入大量的动态元素，比如：

在页面中有一个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交互操作

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

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