浏览器的重绘和回流导致的性能问题

• 重绘：当节点需要更改外观而不会影响布局的，比如改变 color就称为重绘

• 回流：布局或者几何属性需要改变就称为回流。

        回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变深层次的节点很可能导致父节点的一系列回流。

所以以下几个动作可能会导致性能问题：

• 改变 window 大小

• 改变字体

• 添加或删除样式

• 文字改变

• 定位或者浮动

• 盒模型

重绘和回流其实和 Event loop 有关。

减少重绘和回流

• 使用 translate 替代 top。
• 使用 visibility替换 display: none，因为前者只会引起重绘，后者会引发回流（改变了布局）。
• 不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局。
• 动画实现的速度的选择，动画速度越快，回流次数越多，也可以选择使用 requestAnimationFrame。