什么是关键渲染路径 (CRP)?

关键渲染路径（Critical Rendering Path, CRP）是指浏览器从接收到 HTML、CSS 和 JavaScript 文件，到最终在屏幕上渲染出页面的所有步骤和过程。优化 CRP 的核心目标是尽快完成首次渲染，提升用户体验，这直接关系到像 FCP (First Contentful Paint) 这样的性能指标。

CRP 的五个核心步骤

  1. **构建 DOM 树 (Document Object Model)**：解析 HTML 字节，构建节点树。
  2. **构建 CSSOM 树 (CSS Object Model)**：解析 CSS 字节，构建样式规则树。
  3. **构建渲染树 (Render Tree)**：结合 DOM 和 CSSOM，生成包含视觉信息的渲染树（它只包含需要显示的节点）。
  4. **布局 (Layout/Reflow)**：计算渲染树中所有可见元素在屏幕上的确切位置和大小。
  5. **绘制 (Paint)**：将布局好的像素渲染到屏幕上。

优化 CRP 的策略

1. 优化资源加载顺序

  • CSS 是阻塞渲染的资源：浏览器必须等待 CSSOM 构建完成才能开始渲染树的构建。因此，要尽早加载关键 CSS，并使用 <link rel="preload"> 或媒体查询优化非关键 CSS 的加载。
  • JavaScript 也是阻塞渲染的资源：JavaScript 会阻塞 DOM 树的解析。
    • 非关键 JS：使用 async 或 defer 属性。
      • async：下载不阻塞 DOM 解析，下载完成后立即执行（执行时会阻塞）。
      • defer：下载不阻塞，直到 HTML 解析完成后才执行（保持执行顺序）。
    • 关键 JS：内联（Inline）关键的 JS，直接嵌入 HTML 中。

2. 优化 CSSOM 的构建速度

  • 压缩和拆分 CSS：删除不必要的空格和注释，将大的 CSS 文件拆分成更小的、按需加载的块。
  • 媒体查询：使用 <link rel="stylesheet" media="print"> 或 media="max-width: 480px" 等，浏览器会优先处理匹配当前设备的 CSS，不匹配的不会阻塞渲染。

3. 减少关键字节数

  • 服务器端压缩：使用 Gzip 或 Brotli 压缩传输的 HTML、CSS 和 JS 文件。
  • 利用浏览器缓存：配置正确的 HTTP 缓存头（Cache-Control, Expires），减少重复请求。

总结

优化关键渲染路径，就是让浏览器尽快获取到渲染页面所需的最少和最关键的 HTML、CSS 和 JavaScript 资源，从而减少白屏时间，实现更快的用户体验。