前端性能与可靠性工程系列: 渲染、缓存与关键路径优化
前端性能与可靠性工程系列: 渲染、缓存与关键路径优化
第一部分：揭秘浏览器 - 关键渲染路径 (CRP)
关键渲染路径 (Critical Rendering Path - CRP) 是指浏览器从接收到最初的 HTML、CSS 和 JavaScript 字节，到最终将它们渲染成可见像素所必须经过的一系列步骤。我们的目标，就是让这个系列步骤走得尽可能的快、尽可能的顺畅。
这个过程就像一个精密的工厂流水线：
-
处理 HTML → 构建 DOM (文档对象模型)
浏览器接收到 HTML 响应后，会逐行解析，并构建出一个树状结构，即 DOM (Document Object Model)。这棵树代表了页面的所有内容和结构。 -
处理 CSS → 构建 CSSOM (CSS 对象模型)
当解析器遇到 CSS（无论是<link>标签、<style>标签还是内联样式），它会开始构建另一棵树状结构，即 CSSOM (CSS Object Model)。这棵树包含了页面上所有节点的样式信息。 -
组合 DOM 与 CSSOM → 构建渲染树 (Render Tree)
浏览器会将 DOM 和 CSSOM 合并起来，生成渲染树 (Render Tree)。这棵树只包含那些需要被渲染的节点（例如，display: none;的节点就不会出现在渲染