Javascript高级编程学习笔记（41）—— DOM（7）DocumentFragment类型

DocumentFragment类型

除开昨天我们了解的两种不常用的类型之外

今天我们要介绍的两种类型可以说使用频率不输于前面最常用的几种元素类型

首先就是DocumentFragment类型

有些小伙伴可能没有听说过这个类型，但是这个类型在前端性能优化方面有着举足轻重的作用

应该是仅次于VirtualDOM（虚拟节点技术）的

那么为什么大家对这种类型没有太多的感触呢？

因为只有这种类型没有对应的DOM标记，也就是说没法通过解析页面代码获得

书中对该类型的定义如下：

是一种轻量级文档，可以包含和控制节点，但不会像普通的页面那样占用浏览器资源

该类节点具有以下特征：

1、nodeType：11

2、nodeName："#document-fragment"

3、nodeValue：null

4、parentNode：null

这类节点说白了就是不完整的文档

当然也不属于当前的页面的文档

所以通常用于暂存页面的节点变动，比如有时候我们可能需要循环添加一些DOM内容

但是每一次循环浏览器都会进行页面的重排、重绘等，以此来展现变更的内容

然而实际上，在很多情况下我们实际上要的只是最终的结果

至于其中循环了几次，进行了多少次的操作我们并不关心

这种时候我们就需要使用 DocumentFragment 来保存节点的变动，然后一次性渲染到页面上

例如如下代码：

var fragment = document.createDocumentFragment();
var ul = document.getElementById("myList");
var li = null;
 
for(let i = 0;i<10;i++){
    li = document.createElement("li");
    li.appendChild(document.createTextNode("Iten"+i));
    fragment.appendChild(li);
}
 
ul.appendChild(fragment); //将Fragment中的节点删除并移入文档

所以我们平时在不使用框架的时候，这些优化页面性能的方式还是十分重要的