提问

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

什么是重排（reflow）？

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

什么时候会触发重排？

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

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

什么是重绘（repaint）？

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

什么时候会触发重绘？

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

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

为什么 transform 的效率高

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

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