首屏白屏主因是浏览器解析外部CSS时阻塞HTML解析和DOM构建，必须内联或预加载关键CSS；关键CSS指首屏元素渲染必需的样式（含匹配的媒体查询与伪类），需通过Coverage面板结合Puppeteer精准提取，并注意CSP、路径、响应式断点及缓存一致性。
首屏白屏时间长，核心问题不是CSS体积大，而是浏览器解析关键CSS路径时被阻塞——必须把首屏渲染必需的CSS提前加载、内联或预加载，而非简单压缩。
为什么 link rel="stylesheet" 会触发白屏
浏览器遇到外部 <link rel="stylesheet"> 时，会暂停 HTML 解析和 DOM 构建，直到该 CSS 文件下载并解析完成（即使它只影响页脚）。首屏内容若依赖未就绪的样式规则，就会出现不可控白屏。
- 即使使用
media="print"或media="(min-width: 1024px)"，现代浏览器仍会预下载（除非是media="not all"或无效媒体查询） -
preload只能提升下载优先级，不能绕过 CSSOM 构建阻塞；prefetch更晚，对首屏无用 - 服务端渲染（SSR）页面若未提取关键CSS，同样白屏——因为生成的 HTML 里仍含外部
link
如何提取真正关键的CSS（非工具链自动裁剪）
所谓“关键CSS”指：首屏视口内所有元素渲染所依赖的样式规则（含伪类、媒体查询匹配部分），不含滚动后才出现的模块、JS动态插入的节点样式。
- 用 Chrome DevTools 的
Coverage面板（More Tools → Coverage）刷新页面，筛选.css文件，看首屏渲染后未执行的规则占比——但注意：它统计的是“未应用”，不等于“不关键”（如:hover规则在初始状态不触发，但属于交互关键） - 更可靠方式是结合
Puppeteer截取首屏 viewport 并调用page.emulateMedia("screen")+page.evaluate(() => getComputedStyle(document.body))辅助定位依赖链 - 避免用
critters或penthouse对整个 CSS 全量分析——它们常误判响应式断点，尤其当使用@container或嵌套媒体查询时
内联关键CSS时必须处理的三个细节
把提取出的关键CSS写进 的 <style></style> 标签里，看似简单，实则容易引发新问题。
立即学习“前端免费学习笔记（深入）”；
- 内联
<style></style>无法利用缓存，需配合 HTTP/2 Server Push 或Cache-Control: no-cache+ ETag 精确控制更新时机 - 若页面含 CSP 策略，必须添加
style-src 'self' 'unsafe-inline'（不推荐）或改用nonce：服务端生成随机nonce="abc123"，同时在<style nonce="abc123"></style>和 CSP 响应头中同步设置 - 内联CSS中禁止含
@import，且所有 URL（如background: url(/img/logo.svg)）需为绝对路径或 base64 编码，否则相对路径在内联后失效
响应式场景下媒体查询的陷阱
关键CSS提取时，不能只取默认断点下的规则。设备宽度未知时，浏览器会按 HTML 中声明的 <meta name="viewport" content="width=device-width"> 初始化布局视口，再根据实际尺寸匹配媒体查询。
- 务必保留
@media (max-width: 768px)和@media (min-width: 769px)中首屏可见部分的规则——哪怕当前调试环境是桌面，用户可能用手机访问 - 不要合并重复选择器到同一媒体块内（如把
.header { color: red }和@media (prefers-color-scheme: dark) { .header { color: blue } }拆开），否则暗色模式切换时重绘异常 - 使用
content-visibility: auto的容器，其子元素样式不会进入关键路径——但首次渲染时仍需确保父容器自身有显式宽高，否则白屏持续到 JS 执行
关键CSS提取不是一劳永逸的配置项，每次修改首屏结构、调整断点阈值、新增字体图标或 SVG 内联资源，都必须重新验证覆盖范围。最易被忽略的是：构建流程中提取结果未随 HTML 版本号更新，导致 CDN 缓存了旧的关键CSS，而新HTML引用了新CSS文件——此时白屏反而更长。
