提问

1. 请说说什么是重绘/重排
2. 什么时候会引起重绘/重排
3. 为什么 transform 的效率高

什么是重排（reflow）？

reflow 的本质时重新计算布局树。

什么时候会触发重排？

当进行了会影响布局树的操作后，需要重新计算布局树，会触发 reflow。

为了避免连续的多次操作导致布局树的重复计算，浏览器会将 JS 中的同类操作代码全部完成后统一计算布局树。

什么是重绘（repaint）？

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

什么时候会触发重绘？

当改动了可见样式后，就需要重新计算，引发 repaint。

由于元素布局信息也属于可见样式，因此 reflow 也会引起 repaint。

为什么 transform 的效率高

transform 既不会影响布局也不会影响绘制指令，它影响的只是 draw 阶段。

又由于 draw 阶段在合成线程中，所以 transform 的变化几乎不会影响渲染主线程。