Reflow和Repaint

Reflow

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

Repaint

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

引起Repaint和Reflow的一些操作

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

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

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

Reflow和Repaint

原文：https://www.cnblogs.com/fortuneteller-li/p/12803673.html