关键渲染路径 (Critical Rendering Path, CRP) 是浏览器将 HTML、CSS 和 JavaScript 转换为屏幕上可见像素所经历的一系列步骤。优化 CRP 是提升页面加载速度和 Core Web Vitals 的核心。

CRP 的基本流程：

1. DOM 构建： 浏览器解析 HTML 字节，构建 DOM 树。
2. CSSOM 构建： 浏览器解析 CSS，构建 CSSOM 树。
3. 渲染树构建： DOM 和 CSSOM 合并形成渲染树。
4. 布局 (Layout)： 计算所有元素的位置和大小。
5. 绘制 (Paint)： 将像素绘制到屏幕上。

如何加速 CRP？

目标是尽快完成布局和绘制，即减少阻塞渲染的资源：

• 内联关键 CSS： 将首屏所需的 CSS 直接写在 <style> 标签中。
• 异步加载非关键 CSS： 使用 <link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'">。
• 延迟 JS： 对不影响首屏的 JavaScript 使用 async 或 defer 属性。