js碎片容器的理解和使用

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

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

2、什么是文档碎片？

document.createDocumentFragment() 一个容器，用于暂时存放创建的dom元素

3、文档碎片有什么用？

将需要添加的大量元素 先添加到文档碎片中，再将文档碎片添加到需要插入的位置，大大 减少dom操作，提高性能（IE和火狐比较明显）

如下代码每次循环都要操作dom 并向其添加元素 重新渲染界面，发生重绘或回流

        var arr=["北京","西安","武汉","郑州","天津"]
    var ul=document.createElement("ul");
    for(var i=0;i<10;i++){
     
       var li=document.createElement('li');
       li.textContent=arr[i];
        //每次循环都要操作dom 并向其添加元素 重新渲染界面，发生重绘或回流  
       ul.appendChild(li);
   }
   document.body.appendChild(ul)
   

创建碎片容器 先把零散的元素放在碎片容器中，然后一次放入

var elem=document.createDocumentFragment();
for(var i=0;i<10;i++){
     
    var li=document.createElement("li");
    li.textContent=arr[i];
    elem.appendChild(li);
}
document.body.appendChild(elem);