重绘 (Repaint) 和回流 (Reflow)
重绘 (Repaint)
重绘是当节点需要更改外观但不会影响布局时发生的，例如改变颜色。
回流 (Reflow)
回流是当布局或几何属性需要改变时发生的（需要计算节点在设备视口(viewport)内的确切位置和大小）。回流必定会导致重绘，但重绘不一定会引发回流。回流所需的成本比重绘高得多，改变深层次的节点可能导致父节点的一系列回流。
以下几个动作可能导致性能问题：
- 添加或删除可见的 DOM 元素
- 元素位置发生变化
- 元素尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
- 内容发生变化，如文本变化或图片被另一个不同尺寸的图片替代
- 元素的定位或浮动属性发生变化
- 浏览器窗口尺寸变化（因为回流是根据视口大小计算元素位置和大小的）
减少重绘和回流
为提高性能，可以采取以下措施减少重绘和回流：
- 批量修改 DOM
- 对于复杂动画效果，使用绝对定位使其脱离文档流
- 使用 CSS3 硬件加速（GPU加速）。例如，
transform、opacity和filters这些动画不会引起回流重绘。
