页面优化，DocumentFragment对象详解
一、前言
最近项目不是很忙，所以去看了下之前总想整理的重汇和回流的相关资料，关于回流优化，提到了DocumentFragment的使用，这个对象在3年前我记得是有看过的，但是一直没深入了解过，所以这里做个整理。后面会把重汇，回流也做个整理，不鸽。
二、DocumentFragment对象是什么？
MDN解释：
DocumentFragment 表示一个没有父级文件的最小文档对象。它被当做一个轻量版的 Document 使用，用于存储已排好版的或尚未打理好格式的XML片段。最大的区别是因为DocumentFragment不是真实DOM树的一部分，它的变化不会引起DOM树的重新渲染的操作(reflow) ，且不会导致性能等问题。---MDN
W3C解释：
DocumentFragment 接口表示文档的一部分（或一段）。更确切地说，它表示一个或多个邻接的 Document 节点和它们的所有子孙节点。 DocumentFragment 节点不属于文档树，继承的 parentNode 属性总是 null。 不过它有一种特殊的行为，该行为使得它非常有用，即当请求把一个 DocumentFragment 节点插入文档树时，插入的不是 DocumentFragment 自身，而是它的所有子孙节点。这使得 DocumentFragment 成了有用的占位符，暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作，尤其是与 Range 接口一起使用时更是如此。 可以用 Document.createDocumentFragment() 方法创建新的空 DocumentFragment 节点。---W3C
怎么去理解呢？我们结合上面两解释可以得知，DocumentFragment 节点不属于DOM树，因此它的变化不会引起DOM树的变化；
我们知道，DOM树的操作会引起回流，那我们可以将DocumentFragment作为一个暂时的DOM节点存储器，当我们在DocumentFragment 修改完成时，我们就可以将存储DOM节点的DocumentFragment一次性加入DOM树，从而减少回流次数，达到性能优化的目的。
三、DocumentFragment对象怎么用？
我们可以使用document.createDocumentFragment()创建一个DocumentFragment，每个新建的DocumentFragment都会继承所有node方法。且DocumentFragment拥有nodeValue，nodeName，nodeType属性。
let fragment = document.createDocumentFragment();
console.log(fragment.nodeValue); //null
console.log(fragment.nodeName); //#document-fragment
console.log(fragment.nodeType); //
使用DocumentFragment能解决直接操作DOM引发大量回流的问题，比如我们要给ul添加五个li节点，区别就像这样：
直接操作DOM，回流五次：
使用DocumentFragment一次性添加，回流一次：
假设我们给ul加入五万个li，分别对比下渲染完成时间：
html：
<body>
<ul id="list"></ul>
<ul id="list1"></ul>
</body> js:
//使用documentFragment添加节点
console.time("time")
let list = document.querySelector("#list"),
fragment = document.createDocumentFragment(),
n = 50000;
while(n--){
fragment.appendChild(document.createElement("li"));
};
list.appendChild(fragment);
console.timeEnd("time") //直接操作DOM添加节点
console.time("time1")
let list1 = document.querySelector("#list1"),
i = 50000;
while(i--){
list1.appendChild(document.createElement("li"))
};
console.timeEnd("time1")
多刷新几次对比两者的耗时，time是使用了DocumentFragment的耗时，time1是直接添加DOM的耗时
很明显，time比time1耗时要短很多。
再刷新几次试试
很明显，多次刷新反而还会出现使用DocumentFragment耗时更久的情况，性能更差？打脸了。暂时无法解释，希望有大佬能说说。
不过读到这，也明白了DocumentFragment是个什么东西，怎么使用它，那么本文就到这里结束了。
参考资料
深入理解DOM节点类型第四篇——文档片段节点DocumentFragment
页面优化，DocumentFragment对象详解的更多相关文章
- Window 对象详解 转自 http://blog.csdn.net/jcx5083761/article/details/41243697
详解HTML中的window对象和document对象 标签: HTMLwindowdocument 2014-11-18 11:03 5884人阅读 评论(0) 收藏 举报 分类: HTML& ...
- mvc-servlet---ServletConfig与ServletContext对象详解（转载）
ServletConfig与ServletContext对象详解 一.ServletConfig对象 在Servlet的配置文件中,可以使用一个或多个<init-param>标签为s ...
- JavaWeb学习----JSP内置对象详解
[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...
- django中request对象详解(转载)
django中的request对象详解 Request 我们知道当URLconf文件匹配到用户输入的路径后,会调用对应的view函数,并将 HttpRequest对象 作为第一个参数传入该函数. ...
- dom对象详解--document对象(一)
document对象 Document对象代表整个html文档,可用来访问页面中的所有元素,是最复杂的一个dom对象,可以说是学习好dom编程的关键所在. Document对象是window对象的一 ...
- js对象详解(JavaScript对象深度剖析，深度理解js对象)
js对象详解(JavaScript对象深度剖析,深度理解js对象) 这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕 ...
- Angular.js中处理页面闪烁的方法详解
Angular.js中处理页面闪烁的方法详解 前言 大家在使用{{}}绑定数据的时候,页面加载会出现满屏尽是{{xxx}}的情况.数据还没响应,但页面已经渲染了.这是因为浏览器和angularjs渲染 ...
- Vue实例初始化的选项配置对象详解
Vue实例初始化的选项配置对象详解 1. Vue实例的的data对象 介绍 Vue的实例的数据对象data 我们已经用了很多了,数据绑定离不开data里面的数据.也是Vue的核心属性. 它是Vue绑定 ...
- jQuery的deferred对象详解
jQuery的deferred对象详解请猛击下面的链接 http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_ ...
随机推荐
- centos7系统下 docker 环境搭建
运行环境: VMware Workstation Pro 在虚拟机中安装centos7系统, 选择最小安装, 网络连接方式选择的桥接(与宿主机在同一IP段)centos7一定要安装64位, docke ...
- js与es6中获取时间戳
在项目中经常会用到求时间戳的问题,下面是已经封装好的函数,直接使用就可以.1.js常用获取时间戳的方法 // 获取时间戳 var start = new Date().getTime(); conso ...
- H5上传功能
近期开发一个关于微信公总号二次开发中,上传图片的需求,测试几个开源插件,更新一些心得,有需要可留言!!! plupload plupload多张上传图片的一个参考demo ajaxFileUpload ...
- ios开发中的深拷贝和浅拷贝
这是一个老生常谈的话题,面试中也经常被问到,下面总结一下自己的一些心得. 一句话总结: 浅拷贝就是指针拷贝: 深拷贝是对象本身的拷贝: 下面一张抽象的图可以直观的表述出两句话的内涵 其实这里还引申出了 ...
- DAO模式
什么是DAO模式: DAO(Data Access Object Pattern)用于将低层的数据操作API与上层的业务逻辑层分离,其主要涉及以下几个部分: 1.Data Access Object ...
- vue font-icon 图标
1.vue 游览器左上角小图标 把.ico文件放在根目录下的static文件夹下,然后link标签引入 <link rel="shortcut icon" href=&quo ...
- docker kubernetes Swarm容器编排k8s CICD部署
1docker版本 docker 17.09 https://docs.docker.com/ appledeAir:~ apple$ docker version Client: Docker En ...
- 如何使用微信小程序云函数发送短信验证码
其实微信小程序前端和云端都是可以调用短信平台接口发送短信的,使用云端云函数的好处是无需配置域名,也没有个数限制. 本文使用的是榛子云短信平台(http://smsow.zhenzikj.com) ,S ...
- React Native组件、生命周期及属性传值props详解
创建组件的三种方式 第一种:通过ES6的方式创建 /** * 方式一 :ES6 */ export default class HelloComponent extends Component { r ...
- SUSE12Sp3-Nginx安装
1.安装pcre(nginx 依赖) 把安装包pcre-8.12.tar.gz复制到服务器指定目录 tar -zxvf pcre-8.12.tar.gz # 解压 cd pcre-8.12 #进入目录 ...