关键渲染路径是浏览器把 HTML、CSS 和 JS 变成屏幕上像素所运行的一系列步骤。任何必须在首次绘制之前完成的东西都是渲染阻塞的。
各个步骤
- 解析 HTML → 构建 DOM 树。
- 解析 CSS → 构建 CSSOM 树。
<script> 会在下载和运行期间停止 HTML 的解析。<!-- Blocks parsing: browser waits here before continuing -->
<script src="/app.js"></script>
<!-- defer: download in parallel, run after HTML is parsed, in order -->
<script src="/app.js" defer></script>
<!-- async: download in parallel, run as soon as ready (order not guaranteed) -->
<script src="/analytics.js" async></script>
对触及 DOM 的应用代码使用 defer，对像统计分析这类独立脚本使用 async。内联关键 CSS，其余的以非阻塞方式加载。
这是几乎所有加载时间优化背后的思维模型：渲染阻塞的 CSS/JS 是首次绘制慢和 LCP 差的首要原因。知道 defer/async 为什么存在，说明你理解浏览器，而不只是记住语法。