重排（reflow）
例如更新了元素的几何属性，浏览器触发重新布局，解析之后的一系列子阶段。重排需要更新完整的渲染流水线，所以开销也是最大的。
实践案例：
- 触发重排的操作尽量放在一起，比如改变dom的高度和设置margin分开写可能会导致两次重排
- 避免使用table布局
- 避免设置多层内联样式：浏览器对css解析的规则是，从右到左匹配查找，样式层级过多会影响重排重绘的效率，因为在渲染阶段中需要对样式进行计算，如果样式层级太深，查找匹配时间就会变长
- 激活css的伪类（例如：hover）
减少重排范围
我们应该尽量以局部布局的形式组织html结构，尽可能小的影响重排的范围。
- 尽可能在低层级的DOM节点上，而不是像上述全局范围的示例代码一样，如果你要改变p的样式，class就不要加在div上，通过父元素去影响子元素不好。
- 不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局。那么在不得已使用table的场合，可以设置table-layout:auto;或者是table-layout:fixed这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围。
重绘（repaint）
例如更新了元素的背景颜色，布局阶段将不会被执行，因为并没有引起几何位置的变化，所以直接进入绘制阶段。相较于重排操作，重绘省去了布局和分层阶段，所以执行效率会比重排操作要高一些。
实践案例：
合成
渲染引擎跳过布局和绘制，只执行后续合成操作
使用css的transform来实现动画效果，可以避开重排和重绘，直接在非主线程上执行动画合成操作，所以相对于重绘和重排，合成能大大提升绘制效率。【因为tranform使用过会直接开启GPU,GPU在光栅化线程池内合成，所以transform可以直接合成】
