性能优化：DocumentFragment

 DocumentFragment:文档碎片（高效批量更新多个节点）

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

//documentFragment：内存中保存n个element的容器对象（不与界面关联），如果更新fargment中的某个elemnt

• test1
• test2
• test3

const ul = document.getElemntById(“fragment_test”)

1. 创建fragment const fragment =document.createDocumentFragment()

2. 取出ul所有子节点取出保存到fragment

Let child

while(child=ul.firstChild){//一个节点只能有一个父亲

fragment.appendChild(child)}//先将child从ul中移除，添加为fragment子节点

3. 更新fragment中所有li的文本

Array.prototype.slice.call(fragment.childNodes).forEach(node=>{

if (node.nodeType===1){//元素节点