documentFragment文档碎片

documentFragment是一个保存多个element的容器对象（保存在内存）当更新其中的一个或者多个element时，页面不会更新。只有当documentFragment容器中保存的所有element更新后再将其插入到页面中才能更新页面。
documentFragment用来批量更新
列如将ul里面的li取出放到documentFragment,更新完毕后再将其插入到ul,一共有以下四步骤：

1. 创建documentFragment对象fragment
2. 取出ul中的所有子节点并保存到fragment
3. 更新fragment中的所有节点（li的内容）
4. 将fragment插入到ul

   //初始显示test1
   <div id="test">
           <li>test1</li>
           <li>test1</li>
           <li>test1</li>
       </div>
   const ul = document.getElementById('test')
   // 创建fragment对象
   const fragment = document.createDocumentFragment()
   //  取出ul中的所有子节点并保存到fragment
   let child;
   while(child=ul.firstChild) {
     fragment.appendChild(child)
   }
   //更新fragment中的所有节点（li的内容）
   Array.prototype.slice.call(fragment.childNodes).forEach(node => {
     if (node.nodeType===1) {//取得元素节点
       node.textContent = 'test2' //重新赋值为test2
     }
   })
   // 将fragment插入到ul
   ul.appendChild(fragment)

   在fragment插入到ul之前页面不会更新，documentFragment用来批量更新元素