关键渲染路径 (Critical Rendering Path, CRP) 是浏览器将 HTML、CSS 和 JavaScript 转换为屏幕上可见像素所经历的一系列步骤。优化 CRP 是提升页面加载速度和 Core Web Vitals 的核心。
CRP 的基本流程：
- DOM 构建： 浏览器解析 HTML 字节，构建 DOM 树。
- CSSOM 构建： 浏览器解析 CSS，构建 CSSOM 树。
- 渲染树构建： DOM 和 CSSOM 合并形成渲染树。
- 布局 (Layout)： 计算所有元素的位置和大小。
- 绘制 (Paint)： 将像素绘制到屏幕上。
如何加速 CRP？
目标是尽快完成布局和绘制，即减少阻塞渲染的资源：
- 内联关键 CSS： 将首屏所需的 CSS 直接写在
<style>标签中。 - 异步加载非关键 CSS： 使用
<link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'">。 - 延迟 JS： 对不影响首屏的 JavaScript 使用
async或defer属性。