深入理解浏览器的渲染流程

渲染流水线

浏览器的渲染流程可以分为五个关键步骤：

1. 解析 HTML → DOM 树
2. 解析 CSS → CSSOM 树
3. 合并 DOM 和 CSSOM → 渲染树
4. 布局（Layout/Reflow）：计算每个节点的精确位置和大小
5. 绘制（Paint）：将渲染树转换为屏幕上的像素

合成层

使用 transform 和 opacity 触发的动画只会经历合成阶段，跳过布局和绘制，性能最优。这就是"仅合成属性"动画。