应通过Chrome DevTools的Performance面板查看Parse Stylesheet任务位置与持续时间，结合Network面板中Initiator为parser的CSS资源，定位阻塞渲染的link rel="stylesheet"；若其位于head靠前、无media属性且含@import，则极可能是首屏关键阻塞点。
怎么看哪个 link rel="stylesheet" 在阻塞渲染
浏览器不会直接标出“这个 CSS 卡住了你”，但会把阻塞行为压在主线程上。打开 Chrome DevTools → Performance 面板 → 录制一次完整页面加载（勾选 Screenshots），回放时盯紧 Main 线程顶部的 Parse Stylesheet 任务：它出现得越早、持续时间越长、越靠近 First Contentful Paint（FCP）之前，就越可能是首屏关键阻塞点。
常见错误现象：FCP 延迟 > 1s，且 FCP 虚线明显落在一个长条 Parse Stylesheet 之后；或者 Timings 区域里 FP 和 FCP 被整体压后。
-
link rel="stylesheet"出现在<head>越靠前，触发阻塞越早 —— 尤其是没加media或disabled的普通样式表 - 用 Network 面板查该资源的
Initiator列，确认是否为parser：是，说明 HTML 解析中途同步拉取，属于关键阻塞源；是script或other，则通常不阻塞首屏 - 如果该 CSS 文件里含
@import，尤其是嵌套多层，Parse Stylesheet时间会显著拉长 —— 它是串行解析，无法并行
为什么 link rel="stylesheet" 默认就阻塞，哪怕文件很小
这不是网络慢的问题，而是浏览器强制行为：link rel="stylesheet" 一被 parser 遇到，就会立刻中断 DOM 构建，发起请求，并阻塞后续所有 HTML 解析，直到 CSS 下载完成、解析出 CSSOM。哪怕只有 1KB、本地缓存命中，仍要验证 Cache-Control 头、解析内容，产生确定性阻塞。
更隐蔽的是：多个 link 是串行加载的 —— 第二个必须等第一个 CSSOM 构建完才开始下载；默认 media="all"，浏览器视其为关键资源，无法跳过。
立即学习“前端免费学习笔记（深入）”；
- 服务端返回
Cache-Control: max-age=31536000救不了首次访问 —— 首次照样阻塞 - 把
link写在<body>里更糟：HTML 解析器会回退重排，触发额外开销 - 内联
<style>可绕过网络请求，但若体积超 ~1KB，会在弱网下显著延长 TTFB（首字节到达时间）
用 Coverage 面板快速识别非关键 CSS
DevTools 的 Coverage 面板（More Tools → Coverage）能真实反映当前页面实际用到的 CSS 字节占比。刷新页面后，它会高亮每段 CSS 中未被执行的规则（灰色），帮你判断哪些可以剥离或延迟加载。
注意：Coverage 数据只反映当前视口 + 当前交互状态下的使用情况，不能替代首屏动态捕获（如 Puppeteer 驱动的 critical 工具），但对快速排查冗余样式非常有效。
- 开启 Coverage 后刷新，重点关注
.css文件右侧的百分比 —— 若Unused Bytes超过 60%，大概率存在大量非关键规则 - 灰色高亮部分不要直接删，先确认是否涉及伪类（
:hover）、媒体查询（@media (max-width: 768px)）、或动态 class（.is-loading） - Coverage 不会告诉你“该不该加载”，只告诉你“这次没用到”；要判断是否可异步，还得结合 Network 面板的
Initiator和 Performance 面板的阻塞位置
Network 面板里怎么一眼锁定 parser 触发的阻塞资源
Network 面板是最快定位“谁在主动卡住解析”的地方。筛选 css 和 js 类型，然后看 Initiator 列：
-
parser：资源由 HTML 解析器同步拉取，是关键阻塞源，必须处理 -
script或other：异步加载，通常不影响首屏渲染（除非脚本本身执行耗时或操作了布局） - 若某 CSS 的
Initiator是parser，但你记得它是非关键样式（比如暗色主题、打印样式），说明漏写了media属性 —— 应补为media="print"或media="(prefers-color-scheme: dark)" - 若
Initiator是parser且路径含@import，基本可判定为二级阻塞点，需从源头 CSS 文件中移除或替换为<link>
真正容易被忽略的是：即使 CSS 文件已下载完成，只要没解析完，render tree 就无法生成，FCP 就不会触发 —— 这个“解析”阶段完全不显现在 Network 面板里，只能靠 Performance 面板观察 Parse Stylesheet 任务。
