#关键渲染路径

#1. 什么是关键渲染路径？

关键渲染路径是指浏览器将 HTML、CSS、JavaScript 转化为屏幕上实际像素的步骤全过程。优化首屏加载的核心就是缩短这条路径，减少阻塞资源的数量和大小。

#2. 核心步骤

1. 构建 DOM 树 浏览器解析 HTML，构建文档对象模型树。
2. 构建 CSSOM 树 解析 CSS，构建 CSS 对象模型树。由于没有样式无法渲染网页，这通常是一个阻塞渲染的阶段。
3. 执行 JavaScript 解析到 <script> 标签时，主线程会挂起，下载并执行 JS。由于 JS 可以修改 DOM 和 CSSOM，它的默认执行会阻塞渲染。
4. 生成渲染树 将 DOM 树和 CSSOM 树合并。剔除不可见节点（如 display: none），生成用于布局计算的渲染树。
5. 布局 根据渲染树，计算每个节点在屏幕上的确切坐标和宽高。
6. 绘制与合成 将节点转换为屏幕上的像素，并将多个图层合并渲染到屏幕上。

#3. 优化策略

#(1) 优化 CSSOM 构建

因为浏览器在构建完 CSSOM 前会阻塞渲染，所以需要优先处理核心 CSS。

• 内联首屏关键 CSS：将首屏视口必需的 CSS 直接写在 HTML 的 <style> 标签中，减少一次网络请求。
• 媒体查询：对于非首屏必需的 CSS（如打印样式，或者不匹配当前设备的媒体查询样式），使用 media 属性，让其异步加载，不阻塞首次渲染。

#(2) 优化 JavaScript 执行

传统的 <script> 会中断 DOM 解析。

• 使用 defer：异步下载脚本，但在 DOM 解析完毕后才按顺序执行，不会阻塞渲染。
• 使用 async：异步下载脚本，下载完成后立即暂停 DOM 解析并执行。适用于无依赖的独立脚本（如统计代码）。

#(3) 资源体积与优先级控制

• 压缩与混淆：使用 Gzip/Brotli 压缩传输体积，移除无用代码和注释。
• 资源预加载：使用 <link rel="preload"> 提前声明后续需要的高优先级资源（如关键字体或主图），让浏览器尽早发起请求。