什么是 reflow 重排

reflow的本质就是重新计算的 layout 树。

当前进行了会影响布局树的操作后，需要重新计算布局树，会引发layout。为了避免连续多次的布局树重复计算，浏览器会合并这些操作，当JS代码圈闭完成后再进行统一计算。所以改动属性造成的reflow是异步完成的。

也因为如此，当JS获取布局属性的时候，就可能造成无法获取最新的布局信息。浏览器在反复权衡下，最终决定获取属性立即reflow。

什么是 repaint 重绘

repaint 的本质就是重新根据分层信息计算了绘制指令。

当前改动了可见样式后，就需要重新计算，就会引发repaint。由于元素的布局也属于可见样式，所以reflow一定会引发repaint。

为什么 transform 的效率高

因为 transform 既不会影响布局也不会影响绘制指令，它影响的只是渲染流程的最后一个 draw 阶段。

由于 draw 阶段在合成线程中，所以 transform 的变化几乎不会影响渲染主线程。反之，渲染主线程无论如何忙碌，也不会影响 transform 的变化。