浏览器渲染过程
- 解析 HTML，生成 DOM 树，解析 CSS，生成 CSSOM 树
- DOM 和 CSSOM 合并成渲染树 (render tree)
- 布局：计算每个节点在页面上的大小和位置
- 绘制：根据渲染树和布局信息，浏览器将每个可见元素的视觉表示绘制到一个位图中
- 合成：将位图渲染到屏幕上
回流 重绘
- 回流（Reflow）：网页渲染引擎根据元素的尺寸、位置等来计算页面的排版和布局（上面的布局）
- 重绘（Repaint）：网页渲染引擎根据显示属性 (如颜色、背景、边框样式等) 重新绘制页面元素，不影响元素的位置和尺寸（上面的绘制）
避免回流重绘
- 合并多次 DOM 操作（虚拟 DOM）
- 避免频繁写入样式
- 使用
transform和opacity进行动画，直接由 GPU 加速，而不引起回流 requestAnimationFrame- 需要频繁回流或重绘的节点，可以通过
will-change设定成独立的图层