DOM操作优化--DocumentFragment高效更新多个节点

前言：DOM树的操作会引起回流，而DocumentFragment可以一次性加入DOM树减少回流的次数，达到优化目的。

一、基本概念：

DocumentFragment：它被作为一个轻量版的 Document 使用，就像标准的document一样，存储由节点（nodes）组成的文档结构。

document： 对应显示的页面，包含n个element一旦更新document内部的某个元素界面更新。

与document的不同点：与document相比，最大的区别是DocumentFragment 不是真实 DOM 树的一部分，它的变化不会触发 DOM 树的重新渲染，且不会导致性能等问题。

二、基本用法：

该接口没有特殊的属性，其属性都继承自Node，并补充了ParentNode接口中的属性。

我们想要把ul中的li里面的文本全部变成123456.

<ul id="fragment_test">
    <li>01</li>
    <li>02</li>
    <li>03</li>
</ul>

原始的方法：

• 遍历
• 更改

这样document刷新了三次,那如果我们要更改的元素有很多那document也会刷新很多遍。

使用DocumentFragment后我们可以:

1. 创建一个fragment。
2. 取出ul中所有子节点取出保存到fragment(包括换行)。
3. 修改fragment中的值。
4. 将fragment插入ul。
   用此种方法我们只需要更新一个DOM树。

    //1、创建fragment
    const fragment = document.createDocumentFragment();
    //2、取出ul中所有子节点取出保存到fragment(包括换行)
    let child;

	//child = ul.firstChild 取出第一个子节点，并将其的值赋值给child，在while循环中并判断值是否为空

    while(child = ul.firstChild){ //一个节点只能有一个父亲
        fragment.appendChild(child);//先将child从ul中移除，添加为fragment子节点
    }
    //3、更新fragment中所有li的文本
    //得到所有的子标签（伪数组）fragment.childNodes
    //工具函数slice()用于将类数组转换为真正的数组
    Array.prototype.slice.call(fragment.childNodes).forEach(node=>{
        if(node.nodeType === 1){//元素节点<li>，node.nodeType是节点的类型1:元素节点 3:文本节点
            node.textContent = '123456'
        }
    });
    //4、将fragment插入ul
    ul.appendChild(fragment);