回流和重绘
回流必定引起重绘，重绘不一定引起回流
先来简单说一下页面的渲染过程：
DOM（html）+样式（css）-----> render tree（渲染树）--->渲染页面
其中，渲染树中不包括隐藏的结点，如设置display:none;那么该结点不出现在渲染树中，但是visibility:hidden;会出现在渲染树中。因为设置该属性虽然不显示，但是依旧会在页面布局中占据位置。
当页面中的一部分，因为元素的尺寸、布局等属性改变时，页面需要重新构建，这被称为回流（reflow）。所以，每个页面至少需要回流一次，即页面加载的时候。完成回流后，浏览器会重新绘制受影响的部分，这个称为重绘。
当页面中一些元素需要改变外观属性，即不会影响布局的属性，eg:background-color等，这就称为重绘（repaint）。
回流发生的情况：
- 添加或者删除可见的DOM元素
- 元素位置，大小，发生变化
- 浏览器窗口尺寸改变（resize）
- 计算offsetWidth/Height、clientWidth/Height等属性
- 伪类样式的使用
避免回流：
- 尽量在DOM树的末端修改class
- 避免设置多层内联样式
- 动画效果应用到position属性为absolute或者fixed的元素上
