什么是 critical rendering path？如何优化？

推荐答案

什么是 Critical Rendering Path？

Critical Rendering Path（关键渲染路径）是指浏览器从接收 HTML、CSS 和 JavaScript 文件到将这些资源转换为实际像素并显示在屏幕上的过程。这个过程包括以下几个关键步骤：

1. 构建 DOM 树：解析 HTML 并构建文档对象模型（DOM）。
2. 构建 CSSOM 树：解析 CSS 并构建 CSS 对象模型（CSSOM）。
3. 生成渲染树：将 DOM 和 CSSOM 合并为渲染树（Render Tree）。
4. 布局（Layout）：计算每个元素在页面上的确切位置和大小。
5. 绘制（Paint）：将渲染树中的每个节点转换为屏幕上的实际像素。

如何优化 Critical Rendering Path？

1. 减少关键资源数量：通过内联关键 CSS、延迟加载非关键 JavaScript 等方式减少关键资源的数量。
2. 压缩和缩小文件：使用工具压缩 HTML、CSS 和 JavaScript 文件，减少文件大小。
3. 优化 CSS 交付：将关键 CSS 内联到 HTML 中，避免阻塞渲染。
4. 异步加载 JavaScript：使用 async 或 defer 属性异步加载非关键 JavaScript 文件。
5. 预加载关键资源：使用 <link rel="preload"> 预加载关键资源，确保它们尽早可用。
6. 减少重排和重绘：通过优化 CSS 和 JavaScript 代码，减少布局和绘制的次数。

本题详细解读

关键渲染路径的详细步骤

1. 构建 DOM 树：

   • 浏览器解析 HTML 文档，生成 DOM 树。DOM 树是 HTML 文档的树状结构表示，每个 HTML 元素对应一个 DOM 节点。
   • 解析过程中，如果遇到 <script> 标签，浏览器会暂停 DOM 构建，直到脚本下载并执行完毕。

2. 构建 CSSOM 树：

   • 浏览器解析 CSS 文件，生成 CSSOM 树。CSSOM 树是 CSS 规则的树状结构表示，每个 CSS 规则对应一个节点。
   • CSSOM 树的构建是阻塞渲染的，因为浏览器需要完整的 CSSOM 树才能进行下一步的渲染。

3. 生成渲染树：

   • 渲染树是 DOM 树和 CSSOM 树的结合体，它只包含需要在页面上显示的元素。
   • 渲染树中的每个节点都包含了布局和绘制的信息。

4. 布局（Layout）：

   • 布局阶段计算每个元素在页面上的确切位置和大小。这个过程也称为“重排”（Reflow）。
   • 布局是一个计算密集型的过程，频繁的布局操作会显著影响性能。

5. 绘制（Paint）：

   • 绘制阶段将渲染树中的每个节点转换为屏幕上的实际像素。这个过程也称为“重绘”（Repaint）。
   • 绘制操作通常比布局操作更快，但仍然需要优化以减少不必要的绘制。

优化关键渲染路径的具体措施

1. 减少关键资源数量：

   • 通过内联关键 CSS 和延迟加载非关键 JavaScript，可以减少关键资源的数量，从而加快页面的首次渲染速度。

2. 压缩和缩小文件：

   • 使用工具如 UglifyJS、Terser 等压缩 JavaScript 文件，使用 CSSNano 等工具压缩 CSS 文件，减少文件大小，加快下载速度。

3. 优化 CSS 交付：

   • 将关键 CSS 内联到 HTML 中，避免阻塞渲染。可以使用工具如 Critical CSS 提取关键 CSS 并内联到 HTML 中。

4. 异步加载 JavaScript：

   • 使用 async 或 defer 属性异步加载非关键 JavaScript 文件，避免阻塞 DOM 构建和渲染。

5. 预加载关键资源：

   • 使用 <link rel="preload"> 预加载关键资源，确保它们尽早可用，减少页面加载时间。

6. 减少重排和重绘：

   • 通过优化 CSS 和 JavaScript 代码，减少布局和绘制的次数。例如，避免频繁修改 DOM 样式，使用 transform 和 opacity 等属性进行动画优化。

通过以上优化措施，可以显著提升页面的加载速度和渲染性能，改善用户体验。