前端性能与可靠性工程系列: 渲染、缓存与关键路径优化

前端性能与可靠性工程系列: 渲染、缓存与关键路径优化

---

第一部分：揭秘浏览器 - 关键渲染路径 (CRP)

关键渲染路径 (Critical Rendering Path - CRP) 是指浏览器从接收到最初的 HTML、CSS 和 JavaScript 字节，到最终将它们渲染成可见像素所必须经过的一系列步骤。我们的目标，就是让这个系列步骤走得尽可能的快、尽可能的顺畅。

这个过程就像一个精密的工厂流水线：

1. 处理 HTML → 构建 DOM (文档对象模型)
   浏览器接收到 HTML 响应后，会逐行解析，并构建出一个树状结构，即 DOM (Document Object Model)。这棵树代表了页面的所有内容和结构。

2. 处理 CSS → 构建 CSSOM (CSS 对象模型)
   当解析器遇到 CSS（无论是 <link> 标签、<style> 标签还是内联样式），它会开始构建另一棵树状结构，即 CSSOM (CSS Object Model)。这棵树包含了页面上所有节点的样式信息。

3. 组合 DOM 与 CSSOM → 构建渲染树 (Render Tree)
   浏览器会将 DOM 和 CSSOM 合并起来，生成渲染树 (Render Tree)。这棵树只包含那些需要被渲染的节点（例如，display: none; 的节点就不会出现在渲染