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 解析早期就可用，避免阻塞或延迟：
-
内联关键 CSS 到
<head>：把提取出的<style>块直接写在 HTML 模板中，确保无网络请求开销。注意要加media="print"并配合onload切换，避免阻塞渲染：<style media="print" onload="this.media='all'">body{margin:0}...</style> -
预加载非关键 CSS：用
<link rel="preload" as="style" href="non-critical.css" onload="this.rel='stylesheet'">，让浏览器提前下载，但不阻塞渲染 -
服务端注入（SSR 场景）：在 Node.js 渲染时调用
critters库处理 HTML 字符串，自动内联关键 CSS 并异步加载其余部分，比前端 JS 注入更稳定
容易被忽略的兼容性与性能陷阱
看似简单的内联，实操中常踩坑：
立即学习“前端免费学习笔记（深入）”；
-
<style>内联内容若含未转义的</style>字符串（比如 CSS 注释里写了/* */），会导致 HTML 解析中断，样式失效 - Vite / Webpack 的
css.codeSplit默认开启，可能把同一组件的 base 样式和 theme 样式拆到不同文件，导致关键 CSS 提取不全 - HTTP/2 下多个小 CSS 文件的并行加载优势，可能被过度内联抵消——建议只内联 ≤ 15KB 的关键样式，其余走
preload+rel="stylesheet" - CDN 缓存 HTML 模板时，若关键 CSS 随构建版本更新，必须确保 HTML 缓存策略同步失效（比如在文件名中嵌入 hash）
真正难的不是提取样式，而是持续维护关键 CSS 的准确性——每次 UI 改动、新增首屏模块，都得重新跑提取流程并验证渲染效果。
