浏览器Coverage面板是识别首屏样式的唯一靠谱起点，它标记CSS文件中实际用于首屏渲染的字节（绿色）与未使用部分（红色），但不涵盖响应式断点、交互态及JS动态类等隐式依赖。
怎么识别首屏样式？别靠肉眼猜
浏览器的 coverage 面板是唯一靠谱起点。打开 DevTools → More Tools → Coverage → 刷新页面，它会标出哪些 CSS 文件里哪些字节被首屏渲染实际用到。重点看 .css 文件中绿色部分（已使用）和红色部分（未使用），但注意：它只反映当前视口+当前设备尺寸下的结果，响应式断点、用户交互前的 hover/focus 状态、JS 动态插入的 class 都不会被计入。
常见错误现象：body { font-family: sans-serif; } 这类全局重置被标记为“未使用”，其实它影响所有文本渲染，Coverage 无法捕获这种隐式依赖；@font-face 声明也常被误判为未使用，但它触发字体加载，必须保留。
实操建议：
- 在桌面/移动端分别跑一次 Coverage，合并绿色区域作为初筛基线
- 手动检查关键组件（如 header、hero banner、首屏按钮）对应的 class 是否完整覆盖
- 忽略
:hover、:focus-within等交互态样式——它们不属于“首屏必备”
提取后怎么加载？link[rel="preload"] 是底线
把首屏 CSS 提出来单独成文件（比如 critical.css），只是第一步。如果还用 link[rel="stylesheet"] 引入，它仍会阻塞渲染，和原来没区别。必须用 link[rel="preload"] 提前拉取，并配合 onload 注入 DOM。
立即学习“前端免费学习笔记（深入）”；
性能影响很直接：用 rel="stylesheet" 时，浏览器要等 CSSOM 构建完才开始渲染；而 rel="preload" 不阻塞，能提前下载，再由 JS 控制何时生效。
实操建议：
- HTML 中写：
<link rel="preload" href="critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
- 务必加
this.onload=null，否则 Safari 会重复执行 onload 回调 - 不要用
rel="prefetch"替代——它不保证优先级，也不触发 CSSOM 构建 - 如果用了 HTTP/2 Server Push，反而可能干扰资源调度，建议关掉
Webpack/Vite 怎么自动化提取？别手写正则
手动维护 critical.css 几乎不可行。真实项目里 HTML 结构、组件层级、构建产物路径都在变，靠正则匹配或 copy-paste 必然漏掉或冗余。
推荐两个轻量方案：
Vite 用户用 vite-plugin-critical-css，配置简单，支持 SSR 场景；Webpack 用户用 critters（Next.js 内部也在用），它会在构建时启动无头浏览器，真正渲染首屏内容，再提取样式。
参数差异要注意：critters 的 include 选项默认只处理 <link rel="stylesheet">，如果你的样式来自 style 标签或 JS insertRule，得手动指定 inlineStylesheets: true 或预处理。
常见错误现象：提取后的 critical.css 体积比原文件还大——大概率是插件把所有 @import 和字体声明都打包进去了，需配置 pruneSource: true 和 fonts: false。
提取后样式冲突和 FOUC 怎么办？顺序和时机是关键
FOUC（Flash of Unstyled Content）不是“偶尔出现”，而是加载顺序没对齐的确定性结果。比如非首屏样式（main.css）先加载并生效，等 critical.css 后加载覆盖时，就会闪一下。
根本解法只有一个：确保 critical.css 的样式规则在 CSSOM 中优先于其他样式表。这意味着它必须是 HTML 中第一个 link，且不能被 JS 动态插入打乱顺序。
实操建议：
- 把
critical.css的preload标签放在<head>最顶部，早于所有其他link和script - 非首屏 CSS 改用
rel="stylesheet" media="print" onload="this.media='all'"延迟加载，避免抢占 - 慎用 CSS-in-JS 库的 runtime 注入（如 styled-components 的
StyleSheetManager），它无法参与构建期提取，容易导致关键样式缺失
复杂点在于：服务端渲染（SSR）场景下，首屏 HTML 已含内联 critical 样式，客户端 hydration 时又加载一遍，容易重复注入。这时候得靠运行时判断 —— 比如检查 document.getElementById('critical-styles') 是否已存在，再决定是否执行 onload 注入。
