关键渲染路径

定义

关键渲染路径（Critical Rendering Path）指浏览器从接收 HTML 字节到在屏幕上绘制出像素所经历的一系列步骤，包括构建 DOM、构建 CSSOM、生成渲染树、布局与绘制。

主要阶段

1. 解析 HTML 生成 DOM 树；
2. 解析 CSS 生成 CSSOM 树；
3. 二者合并为渲染树（Render Tree）；
4. 布局（Layout）计算每个节点的几何位置；
5. 绘制（Paint）将节点转换为屏幕上的实际像素。

JavaScript 可以修改 DOM 与 CSSOM，因此脚本的加载与执行时机会阻塞路径中的关键步骤。

优化手段

常见做法包括：减少关键资源数量与体积、内联首屏关键 CSS、为脚本添加 async 或 defer 属性、压缩与缓存资源、优先加载首屏内容等。

意义

理解关键渲染路径是分析白屏时间、首次绘制等性能指标的基础，几乎所有前端性能优化方法都可以映射到该模型的某个阶段。