关键CSS必须内联在中以避免首屏渲染阻塞，因其决定用户第一眼所见内容；需提取首屏必需样式（约10%–30%），控制体积≤14KB，配合异步加载非关键CSS。
关键CSS必须内联在 中，且不能依赖外部文件加载完成——否则首屏渲染会被阻塞。
为什么 <link rel="stylesheet"> 会阻塞渲染
浏览器解析 HTML 时，遇到 <link rel="stylesheet"> 会暂停 DOM 构建和渲染，直到该 CSS 资源下载、解析完成。即使样式表很小，网络延迟或 DNS 查询也会导致白屏延长。
- 阻塞行为与
media属性有关：若设为media="print"或不匹配当前设备（如media="(max-width: 480px)"但当前是桌面），则不阻塞渲染 - 但
media="all"（默认）或media="screen"始终阻塞 - 多个
<link>按顺序串行加载，前一个未就绪，后一个不会提前发起请求
如何识别并提取“关键CSS”
关键CSS是指首屏（above-the-fold）渲染必需的样式，不是整站 CSS 文件的全部内容。它通常只占原始 CSS 的 10%–30%，但决定用户第一眼看到什么。
- 用 Chrome DevTools → Network 面板刷新页面，勾选
Disable cache，观察首屏元素（如 header、hero banner、首屏按钮）对应的规则 - 借助工具辅助提取：
critical（Node.js CLI）、Penthouse（支持 Puppeteer 截图分析）、或构建插件如webpack-critical-css-plugin - 手动提取时注意：不要漏掉
@font-face声明（影响文本渲染）、伪类（如:hover不关键，但:focus-visible可能影响可访问性首屏）
内联关键CSS的正确写法与限制
将提取出的关键CSS字符串直接写入 的 <style></style> 标签中，不使用 src 或 href，也不加 async/defer（这些对 <style></style> 无效）。
立即学习“前端免费学习笔记（深入）”；
- 必须放在所有
<link rel="stylesheet">之前，否则仍可能被后续阻塞资源拖慢 - 避免在
<style></style>中使用@import—— 它会触发额外 HTTP 请求并阻塞解析 - 如果使用 CSP（Content-Security-Policy），需允许内联样式：
style-src 'self' 'unsafe-inline'；更安全的做法是用 nonce（如<style nonce="abc123"></style>）并在 header 中同步配置 - 内联内容过大会增加 HTML 体积，建议控制在 ~14KB 以内（避免跨 TCP 包，影响 TTFB）
剩余CSS的异步加载策略
非关键CSS（如折叠区域、交互后才显示的组件、打印样式）应延迟加载，不参与首屏阻塞。
- 用
<link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'">+onload回调切换rel，实现无阻塞加载（注意：IE 不支持onload，需降级 fallback） - 或用 JS 动态创建
<link>并插入，但要确保不阻塞 DOM 解析（脚本需defer或放在前） - 避免用
rel="prefetch"加载 CSS —— 它是低优先级提示，浏览器可能忽略，且不保证执行时机
关键CSS内联看似简单，但真正难的是持续维护：每次修改首屏结构或样式，都得重新提取、验证、更新 HTML 模板。很多团队卡在这里，最后退回到全量外链——结果首屏 FOUC 或白屏时间翻倍。
