先来了解一下什么是重绘和回流。
重绘: 元素的可见性发生变化，这个元素会重新渲染，就叫做重绘。
可见性是指background，color，opacity，outline等这些可见属性。
重绘会对浏览器造成很大的性能消耗。
.box{
width: 100px;
height: 100px;
background: red;
}
box.style.background = "blue"; //重绘
回流: 当元素的形状或者位置发生变化，会影响身边的元素（子级、父级、兄弟），甚至有可能会导致整个页面重新渲染。
性能消耗非常可怕。
注意: 回流必然会发生重绘，重绘不一定发生回流。
box.style.width = "200px"; //回流+重绘
发生回流的情况:
1.onload (页面最少会触发一次回流)
2.改变页面大小 onresize
3.改变形状 (width，height，padding， border，font ...)
4.改变位置(margin，left，right)
5.添加或者删除DOM
6.table布局
如何避免回流:
1.将多个样式集中赋予
box.className = "active ";
或者
box.style.cssText = "width: "+100*3+"px; height: "+100*3+"px; background: blue";
2.动画尽量使用定位(position)或者使用变形
3.不要使用CSS表达式
4.尽量少使用table布局
