浏览器的渲染过程
1、把html文档解析成一棵dom树
2、把css文档解析成一棵css规则树
3、dom树和css规则树组成一个render渲染树，然后根据这个渲染树绘制页面
绘制的过程中有两种情况，重绘和回流
一般外观变化，比如颜色（color）、背景颜色（background-color）的改变会发生重绘
一般布局发生变化，尺寸，显示隐藏和px相关的都会发生回流
频繁的重绘和回流 尤其是回流会导致页面变慢，所以尽量减少或者避免重绘和回流
回流一定会发生重绘，重绘不一定回流
优化的思路
1、浏览器本身自己的ui渲染是异步的，他会把所有要绘制的操作放在一个队列中，然后批量去绘制，减少重绘和回流的次数
2、减少重绘和回流的操作，就是减少对渲染树的操作，可以合并多次的dom和样式的修改
3、操作之前可以先把这一部分隐藏起来（display：none），然后等操作完成后再显示，这样就只发生了一次重绘和回流
4、尽量不要使用行内样式的操作，把修改样式的代码写在类class里面，写完之后调用这个类名，减少重建
5、使用克隆元素的技术，实现复用代码块，减少操作
6、脱离文档流，这样就只重新渲染这一小块，减少大面积的重新渲染
7、使用DocumentFragmnet文档碎片，（不要直接在dom树上操作，而是先搞一个文档碎片，在这个文档碎片上完成所有的操作，然后再把这个文档碎片追加到dom树上，只会导致一次重绘和回流）
<script>
// 没有使用文档碎片之前的写法，会导致101次重绘和回流
var ul = document.createElement('ul')
document.body.append(ul)
for(var i=0;i<100;i++){
var li = document.createElement('li')
li.innerHTML = i;
ul.append(li)
}
</script>
<script>
// 使用文档碎片的写法
// 只有一次重绘和回流
var documentFragment = document.createDocumentFragment();
var ul = document.createElement("ul");
documentFragment.append(ul);
for (var i = 0; i < 100; i++) {
var li = document.createElement("li");
li.innerHTML = i;
ul.append(li);
}
document.body.append(documentFragment);
</script>
