浏览器如何解析 HTML 并构建页面（关键渲染路径）?

Question

Accepted Answer

**关键渲染路径** 是浏览器将 HTML、CSS 和 JS 转换为像素的一系列步骤。理解它可以解释什么阻塞了渲染，以及如何使页面绘制更快。 ## 步骤 ```text 1. Parse HTML → DOM tree (the document structure) 2. Parse CSS → CSSOM tree (the style rules) 3. DOM + CSSOM → Render tree (visible nodes + their styles) 4. Layout (reflow) → compute each node's geometry (position/size) 5. Paint → fill in pixels (colors, text, images) 6. Composite → combine layers onto the screen ``` ## 什么阻塞渲染 **CSS 会阻塞渲染。** 浏览器在 CSSOM 准备好之前不会绘制（以避免无样式内容的闪现）。因此大型/低速 CSS 会延迟首次绘制 — 应该保持关键 CSS 很小，并尽可能将其内联。 **同步脚本会阻塞解析。** 普通的 ` ``` 更糟糕的是，需要 CSSOM 的同步脚本（例如读取计算后的样式）必须等待 CSS — 所以 CSS 文件可能会间接阻塞脚本，进而阻塞解析器。 ## 如何优化 - 将 CSS 放在 `` 中（早期加载）；内联关键 CSS。 - 为脚本添加 `defer`（或 `type="module"`），或将其放在 `` 之前。 - 最小化并压缩 CSS/JS；移除未使用的规则。 - 对关键字体/资源使用 `preload`，对关键源使用 `preconnect`。 - 避免布局抖动（JS 中重复读写布局）— 它会强制额外的 reflow。 ## 为什么这很重要关键渲染路径决定了首次内容绘制 (FCP) 和最大内容绘制 (LCP) 等指标。知道 CSS 阻塞渲染，同步 JS 阻塞解析，这样就能清楚地了解为什么 `defer`/`async`、内联关键 CSS 和资源提示能加快页面速度 — 它们缩短或解除了这条路径的阻塞。