CSS加载闪烁（FOUC）是指HTML先渲染无样式的结构，待CSS下载解析后页面突然跳变成最终样式。优化需三管齐下：内联首屏关键CSS（≤12KB）、预加载剩余关键CSS（rel="preload" as="style" + onload回填）、非关键CSS用media属性延迟加载。
什么是CSS加载闪烁（FOUC）？
页面首次渲染时，HTML先快速显示未样式化的结构，等CSS下载解析完才突然“跳变”成最终样式——这就是FOUC（Flash of Unstyled Content）。它不是所有浏览器都明显，但在慢网、高延迟或CSS体积大时特别刺眼，尤其影响首屏体验。
用 rel="preload" 提前拉取关键CSS
预加载不阻塞渲染，但能提前发起CSS请求，缩短资源就绪时间。关键点在于：只对首屏必需的CSS做预加载，且必须配合as="style"和onload回填逻辑，否则可能被忽略或重复加载。
常见错误是直接写： —— 缺少as属性会导致浏览器当成普通资源处理，不提升优先级。
正确写法示例：
<link rel="preload" href="critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'"><noscript><link rel="stylesheet" href="critical.css"></noscript>
-
onload里把rel从preload改成stylesheet，确保样式真正生效 - 必须加
noscript兜底，否则禁用JS时样式会丢失 - 不要对整个
bundle.css预加载，只选提取出的首屏关键CSS（通常≤10KB）
合并CSS文件真能减少闪烁？
合并本身不直接消除FOUC，但能减少HTTP请求数和TCP往返，加快关键CSS到达时间。前提是合并后仍保持体积可控，否则单个大文件反而拖慢首屏渲染。
容易被忽略的细节：
- 不能简单把
reset.css、theme.css、component.css全cat到一起——要按渲染顺序合并，确保重置样式在最前，组件样式在后 - Webpack中用
mini-css-extract-plugin默认生成单个CSS，但需配合splitChunks避免把异步模块的CSS也打进主包 - 如果用了
@import，它本质是串行加载，比并行link更慢，应彻底避免
为什么rel="stylesheet"放在
即使CSS链接写在，浏览器仍需等待DNS、TCP、TLS、服务器响应、文件下载、解析全部完成才应用样式。中间任意一环卡顿都会延长FOUC时间。
所以实际优化要分层处理：
- 静态关键CSS内联进
标签（注意控制在12KB以内，避免阻塞HTML解析） - 剩余CSS用
rel="preload"+as="style"提前拉取 - 非首屏CSS（如打印样式、暗色主题）用
media属性延迟加载：
内联+预加载+媒体查询三者配合，才能稳定压住FOUC。单独依赖任一手段，在弱网或复杂部署下都容易漏掉某条路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
