关键渲染路径(Critical Rendering Path,CRP)是浏览器将 HTML、CSS 和JavaScript 转换为屏幕上像素所经历的一系列步骤。
优化 CRP，就是缩短这个过程的时间，让用户尽快看到有意义的内容，这是提升首屏性能的核心。这个路径始于浏览器接收到 HTML 文档。
首先，浏览器会解析 HTML，构建起DOM 树。在解析过程中，如果遇到 CSS 文件的链接，会异步下载并解析，构建CSSOM 树。这两个过程通常是并行的。然而，当解析器遇到<script>标签时，情况就变得复杂了–默认情况下，HTML 解析会暂停，等待脚本下载并执行完毕，因为 JavaScript 可能会修改 DOM。这就是所谓的“渲染阻塞”当 DOM 和 CSSOM 都构建完毕后，浏览器会将两者合并成渲染树(RenderTree)，它只包含页面上可见的节点及其样式。紧接着，浏览器会根据渲染树进行布局(Layout)，计算出每个节点在屏幕上的精确位置和尺寸。最后一步是绘制(Paint)，浏览器将节点绘制成屏幕上的像素。
优化 CRP 的策略就是围绕“减少阻塞”和“缩短路径”展开:
- 对于 JavaScript:将
<script>标签放置在</body>前，或使用defer/async属性。defer能保证脚本在HTML解析完毕后按顺序执行，而 async 则是在下载完毕后立即执行，两者都能避免阻塞 DOM 构建 - 对于 CSS:
CSS默认是渲染阻塞资源。我们可以将首屏渲染必需的关键 CSS 内联到 HTML 的<head>中，而将非关键 CSS 通过异步方式加载，从而让渲染树能尽快构建和绘制。 - 减少资源:压缩文件、启用
Gzip、利用HTTP/2等手段，都能加快关键资源的下载速度，从而缩短整个 CRP 的耗时。