Reflow和Repaint

Reflow

当涉及到DOM节点的布局属性发生变化时，就会从新计算该属性，浏览器会从新描绘相应的元素，此过程叫Reflow（回流或重排）。

Repaint

当影响DOM元素可见性的属性发生变化 (如 color) 时, 浏览器会从新描绘相应的元素, 此过程称为Repaint（重绘）。所以重排必然会引发重绘。

引发Repaint和Reflow的一些操做

• 调整窗口大小
• 字体大小
• 样式表变更
• 元素内容变化，尤为是输入控件
• CSS伪类激活，在用户交互过程当中发生
• DOM操做，DOM元素增删、修改
• width, clientWidth, scrollTop等布局宽高的计算

Repaint和Reflow是不可避免的，只能说对性能的影响减到最小，给出下面几条建议：

• 避免逐条更改样式。建议集中修改样式，例如操做className。
• 避免频繁读取元素几何属性（例如scrollTop）。绝对定位具备复杂动画的元素。绝对定位使它脱离文档流，避免引发父元素及后续元素大量的回流