关键渲染路径是浏览器从HTML、CSS、JS到像素绘制的全过程，包括DOM树、CSSOM树、渲染树构建、布局与绘制；优化需优先交付首屏关键资源，剔除阻塞，控制加载顺序。
关键渲染路径（Critical Rendering Path）不是靠“制作”出来的，而是通过优化 HTML、CSS 和 JavaScript 的加载与执行顺序，让浏览器能最快把首屏内容画出来。它本身没有一个叫 Critical Rendering Path 的标签或属性可直接写进 HTML；所谓“制作”，其实是控制资源加载优先级、剔除阻塞、提前交付关键资源。
怎么识别哪些 CSS 是关键的？
关键 CSS 是指渲染首屏（above-the-fold）所必需的样式规则。浏览器遇到 <link rel="stylesheet"> 会立即发起请求，并阻塞渲染直到 CSSOM 构建完成——所以非关键 CSS 必须延迟加载。
- 用 Chrome DevTools 的 Coverage 面板（
More Tools → Coverage）打开页面，刷新后查看 CSS 文件中实际被使用的字节占比，未使用部分就是可剥离的 - 工具如
penthouse或critical可自动提取关键 CSS：例如运行critical https://yoursite.com --inline会生成内联 CSS 片段 - 手动提取风险高：伪类（
:hover）、媒体查询（@media (min-width: 768px)）在首屏可能不触发，但若用户是平板横屏访问，就可能漏掉关键规则
内联关键 CSS 时要注意什么？
把关键 CSS 放进 <style></style> 标签内，能避免额外 HTTP 请求，但体积和维护性要权衡。
- 内联内容不能超过 ~14KB（TCP 初始拥塞窗口限制），否则会跨包，反而拖慢首屏时间
- 不要内联含
@import的 CSS——浏览器会同步加载被导入文件，破坏内联意义 - 如果用了 CSS-in-JS（如 Emotion、Styled Components），需配置服务端渲染（SSR）时的
extractCritical或renderStylesToString提取静态 CSS 字符串 - 务必加
media="print"并配合onload切换，防止 FOUC：例如<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">
script 加载顺序为什么总卡住渲染？
默认 <script> 是同步、阻塞、解析即执行的。哪怕脚本内容为空，只要没加 async 或 defer，就会暂停 HTML 解析、推迟 DOM 构建。
立即学习“前端免费学习笔记（深入）”；
-
async：下载不阻塞 HTML 解析，但下载完立刻执行（可能早于 DOMContentLoaded），适合统计、广告等无依赖脚本 -
defer：下载不阻塞，执行等 DOM 解析完、DOMContentLoaded 前，适合操作 DOM 的逻辑（如初始化轮播图） - 现代方案：用
type="module"脚本天然具有defer行为，且支持import按需加载，但注意 Safari 10.1+ 才完全支持 - 绝对别在
<head>里放无async/defer的<script src="..."></script>—— 这是首屏白屏最常见原因
真正难的不是知道该做什么，而是每次上线前能否准确判断：当前改动是否让某个媒体查询下的关键 CSS 少了一条规则？新引入的第三方 SDK 是否偷偷注入了同步 script？这些细节不会报错，但会让 LCP（最大内容绘制）从 1.2s 悄悄涨到 2.7s。
