重绘回流

先来了解一下什么是重绘和回流。

重绘: 元素的可见性发生变化，这个元素会重新渲染，就叫做重绘。
可见性是指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布局