css加载导致闪屏的根本原因是浏览器阻塞渲染直至cssom构建完成，若关键样式延迟加载，会先用默认样式渲染再重绘。需用coverage面板或critical工具提取首屏必需样式，并以内联、preload或ssr方式注入，同时注意转义、拆分、缓存等陷阱。
为什么 CSS 加载会导致页面闪屏
根本原因是浏览器渲染流程：HTML 解析到 <link rel="stylesheet"> 时会阻塞渲染，直到样式表下载、解析、构建 CSSOM 完成。但若关键样式（如字体、背景色、布局框架）延迟加载或被拆包到非首屏 CSS 中，浏览器可能先用默认样式渲染一次（白屏/错位），再重绘——这就是“闪屏”。尤其在使用 CSS-in-JS、动态 import 或构建工具抽离 vendor.css 时更常见。
如何识别并提取关键 CSS
关键 CSS 是首屏渲染必需的最小样式集合，不包含折叠区域、交互后才显示的组件样式。不能靠肉眼猜，得用工具验证：
- 用 Chrome DevTools 的
Coverage面板（More Tools → Coverage），刷新页面后查看哪些 CSS 规则实际被使用（绿色高亮），导出后手动裁剪 - 用
Puppeteer+critical工具自动提取：critical https://yoursite.com --base dist --html --minify --inline，它会生成内联关键样式 - 注意：响应式断点、
@media (prefers-color-scheme)等需显式声明，否则提取结果可能漏掉暗色模式样式
三种可靠的关键样式注入方式
目标是让关键 CSS 在 HTML 解析早期就可用，避免阻塞或延迟：
