重绘和重排 ​

页面渲染的流程， 简单来说，初次渲染时会经过以下6步： ​

• 构建DOM树
• 样式计算
• 布局定位
• 图层分层
• 图层绘制
• 合成显示

在CSS属性改变时，重渲染会分为回流、重绘和直接合成三种情况，分别对应从布局定位/图层绘制/合成显示开始，再走一遍上面的流程。

元素的CSS具体发生什么改变，则决定属于上面哪种情况：

回流（又叫重排）：元素位置、大小发生变化导致其他节点联动，需要重新计算布局；

重绘：修改了一些不影响布局的属性，比如颜色；

直接合成：合成层的transform、opacity修改，只需要将多个图层再次合并，而后生成位图，最终展示到屏幕上；