## 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);