CSS中避免重排和重绘的小技巧

页面渲染的一般过程为JS > CSS > 计算样式 > 布局 > 绘制 > 渲染层合并。

其中，Layout(重排)和Paint(重绘)是整个环节中最为耗时的两环，所以我们尽量避免着这两个环节。从性能方面考虑，最理想的渲染流水线是没有布局和绘制环节的，只需要做渲染层的合并即可。

那怎么知道哪些CSS属性的改变是会影响这两个环节的呢？

会影响重排和重绘的CSS属性有background-color,box-shadow,display,height

在实际的应用里，最为简单的一个注意点就是，触发动画的开始不要用diaplay:none属性值，因为它会引起Layout、Paint环节，通过切换类名就已经是一种很好的办法。

还有就是，translate属性值来替换top/left/right/bottom的切换，scale属性值替换width/height，opacity属性替换display/visibility等等