文档碎片（精彩）

  1、我们要明白当js操作dom时发生了什么？

    每次对dom的操作都会触发"重排"（重新渲染界面，发生重绘或回流），这严重影响到能耗，一般通常采取的做法是尽可能的减少dom操作来减少"重排"

    2、什么是文档碎片？

     document.createDocumentFragment()

    一个容器，用于暂时存放创建的dom元素。文档碎片不放在DOM树中，而是放在内存中，可以理解文档碎片是一个虚拟的dom节点。这就意味着我们将节点替换插入文档碎片中的时候不会引起回流重绘，

    3、文档碎片的作用：

    将需要添加的大量元素，先添加到文档碎片中，再将文档碎片添加到需要插入的位置，大大减少dom操作，以此提高性能。因为我们要插入大量节点，一个个插入必然会引起大量的回流和重绘，先放到文档碎片中，再将文档碎片插入，可以减少回流重绘，提高性能，

让我们看一下普通节点和使用文档碎片插入的比较

    普通插入节点的方式，每次插入都是一次dom操作。循环插入了100次

    for (let i = 0; i < 100; i++) {

           let elem = document.createElement('div')

           document.body.appendChild(elem)

            console.log(elem);

     }

你可以在控制台发现，dom循环了100次  这样就很消耗性能了，有人可能会说。工作以后会发现100次一点都不多，但是如果是1000次10000次呢  所以不妨直接用文档碎片解决

    文档碎片的方式

   let fragment = document.createDocumentFragment()

   for (let j = 0; j < 100; j++) {

   let elem = document.createElement('div')

       //把创建好的div插入到文档碎片中

        fragment.appendChild(elem)

        //此时并没有操作dom

    console.log(elem);

     }

    //只插入一次

    document.body.appendChild(fragment)

希望大家可以自己试一试