浏览器渲染原理与关键路径

理解浏览器如何渲染页面，是前端性能优化的理论基础。从输入 URL 到看到页面，浏览器经历了一系列复杂步骤。

一、整体流程

1. 解析 HTML 构建 DOM 树
2. 解析 CSS 构建 CSSOM 树
3. DOM + CSSOM 合成渲染树
4. 布局（Layout / Reflow）：计算位置大小
5. 绘制（Paint）：填充像素
6. 合成（Composite）：合并图层

二、DOM 与 CSSOM

HTML 解析成 DOM（文档对象模型），CSS 解析成 CSSOM（CSS 对象模型）。两者都是树结构。

HTML: 
hi
DOM:   div
         └─ p
             └─ "hi"

三、阻塞渲染

• CSS 阻塞渲染（必须等 CSSOM 建好）
• JS 阻塞 DOM 解析（默认）
• async JS 不阻塞，但执行时仍阻塞
• defer JS 延迟到解析完执行

为什么 CSS 放头部、JS 放底部？因为 CSS 不阻塞 DOM 解析但阻塞渲染，JS 默认阻塞 DOM。这样安排能尽早展示首屏。

四、重排与重绘

• 重排（Reflow）：几何属性变化（width、height、位置）→ 重新布局，代价大
• 重绘（Repaint）：外观变化（color、background）→ 重新绘制，代价中
• 合成（Composite）：transform/opacity → GPU 处理，代价小

五、减少重排的技巧

• 用 transform 代替 left/top 做动画
• 批量修改样式（一次性改 class）
• 避免逐条读取 offsetTop 等（强制同步布局）
• 对频繁变化的元素用 will-change

六、图层与合成

某些元素会独立成图层（如 video、3D transform、position:fixed），合成器把各图层合并成最终画面。动画用 transform/opacity 只触发合成，最流畅。

七、实战观察

Chrome DevTools → Performance 面板能录制渲染过程，看每一步耗时；Layers 面板能看到图层划分。

八、小结

渲染原理是前端进阶的分水岭。理解它，性能优化不再是背套路，而是知其所以然。重排 > 重绘 > 合成，牢记这个代价顺序。