内联关键CSS是最快首屏白屏优化手段，需精准提取首屏必需样式并避免阻塞资源；错误操作如全量内联、遗漏响应式分支或未处理异步加载反而加剧白屏。
内联关键 CSS 是目前最直接、见效最快的首屏白屏优化手段，但它不是“把所有 CSS 复制进 <style>”就完事——做错反而拖慢首屏。
为什么浏览器会白屏，而内联 CSS 能打断这个过程
浏览器必须同时拥有 DOM 和 CSSOM 才能生成渲染树。外部 <link rel="stylesheet"> 会触发网络请求，期间 HTML 解析可能暂停，CSSOM 构建被卡住，页面就保持空白。内联关键 CSS 让样式随 HTML 一起到达，解析器边建 DOM 边收集样式规则，CSSOM 可同步构建，首屏元素立刻具备绘制条件。
但注意：这个“同步”只对内联部分成立。如果内联内容里含 @import、url(…)（比如背景图）、或未处理的 @font-face，这些仍会发起新请求并阻塞整条规则应用，白屏照旧。
哪些 CSS 算“关键”，提取时容易误判的点
关键 CSS 必须严格限定在首屏 viewport 内可见区域所用到的选择器，不含折叠区、懒加载模块、弹窗、分页后的内容。常见误操作包括：
立即学习“前端免费学习笔记（深入）”；
- 把全站通用的
.btn、.card全部塞进去，但首页根本没用到.card - 保留了
@media (min-width: 1024px)分支，而用户是手机访问 - 提取时没禁用 JavaScript，工具误把 JS 动态插入的 class 对应样式也纳入
- 忘了剔除
background: url(//cdn.example.com/icon.svg)这类资源引用
验证方法很简单：DevTools → Network → Offline，刷新页面。如果首屏文字、按钮、色块还能正常显示，说明提取基本靠谱；若只剩空白或错位，就得回查漏了哪些规则或引入了阻塞项。
内联后还是白屏？优先检查这三处
内联只是关键一环，不是万能解。以下情况会让内联失效：
-
document.write()或同步脚本写在<head>中，直接中断 HTML parser，后续<style>根本来不及解析 - 首屏 DOM 完全依赖 JS 渲染（如空
<div id="app"></div>），此时 CSS 再快也没内容可画，必须配合 SSR 或 hydration 初始化 -
<link rel="stylesheet">没加media="print"或 onload 切换逻辑，浏览器仍视其为渲染阻塞资源，和内联 CSS 并行排队
尤其注意第三点：很多项目只内联了关键 CSS，却忘了把其余 <link> 改造成异步加载，结果浏览器一边解析内联样式，一边卡在等第二个 CSS 文件，白屏时间毫无改善。
体积控制与构建集成的实际约束
内联 CSS 不是越大越好。HTTP/2 下建议 ≤ 14 KB，HTTP/1.1 下更推荐 ≤ 6 KB——过大会拉长 TTFB 和 HTML 解析时间，得不偿失。实操中需：
- 用
critical或penthouse提取，别手写；不同页面（首页/列表页/详情页）要分别生成 - 构建流程中自动注入，避免手动复制粘贴导致 stale
- 对内联内容做压缩转义（移除空格、注释、合并重复声明），但别用 base64 编码图片——它膨胀体积且无法被缓存
- 服务端模板（如 Next.js 的
getServerSideProps）可动态注入，但注意不要在每次请求时实时提取，应预构建
真正难的从来不是“怎么内联”，而是判断“哪些才算首屏必需”——这需要结合真实设备尺寸、用户滚动行为、数据加载时机反复验证，不能只看设计稿或开发机屏幕。
