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用來批量更新元素