FOUC是浏览器在首次绘制前未获关键样式的必然现象，根本原因是关键CSS未在HTML解析完成前就绪；唯一100%可控方案是内联首屏必需CSS到<style>标签（≤10KB），非关键CSS需preload+onload或服务端精准输出。
FOUC（无样式内容闪烁）不是“偶尔出现的小问题”，而是关键CSS未在首次绘制前就绪的明确信号——它意味着浏览器已开始渲染HTML，但样式链断裂了。
为什么放在
即使CSS链接写在
link标签实际由JS注入，彻底绕过原生阻塞机制。- 检查Network面板里
html响应体是否含<style>或<link rel="stylesheet">，且对应CSS请求的“Start Time”早于“DOMContentLoaded” - Vite项目需确认
vite.config.ts中未启用build.cssCodeSplit: true（首屏CSS必须不拆分） - Webpack项目若用
mini-css-extract-plugin，得配合HtmlWebpackPlugin的inject: 'head'+chunks: ['main']显式控制注入时机
rel="preload" + onload回填必须带as="style"
只写<link rel="preload" href="main.css">毫无作用——浏览器会把它当普通资源低优先级拉取，不会提升CSS解析权重。真正生效的最小写法是：<link rel="preload" href="main.css" as="style" onload="this.rel='stylesheet'">。漏掉as="style"，预加载就等于没做；漏掉onload，资源下完也不会应用样式，页面白屏或持续裸奔。
-
onload回调里建议加this.onload = null防重复触发，尤其在IE11兼容场景下 - 预加载只适用于首屏必需CSS（如
base.css、critical.css），全量app.css预加载反而拖慢TTFB - Webpack中需用
PreloadPlugin或自定义html-webpack-plugin模板注入，Vite中推荐vite-plugin-preload
内联CSS体积必须压到14KB以内
内联<style>是最稳的兜底，但超14KB会突破TCP初始拥塞窗口（IW=10段×1460字节），触发额外RTT，反而延长首字节时间。所谓“关键CSS”不是首页所有样式，仅限首屏DOM节点的最小交集：导航栏结构、主标题字体族、按钮基础尺寸、卡片padding/border——hover、动画、媒体查询中的大屏规则、底部联系方式全部排除。
立即学习“前端免费学习笔记（深入）”；
- 用
Penthouse或vite-plugin-critical-css自动提取，别手写；手写极易遗漏font-family或line-height导致文字堆叠 - 内联后务必移除对应外链
<link>，否则样式重复应用可能引发!important冲突或层叠顺序错乱 - 内联CSS里禁用
@import，它会同步阻塞解析，让整个<style>块失效
服务端渲染时水合不一致会掩盖FOUC
SSR生成的HTML已含样式，看似没FOUC，但客户端水合（hydration）时若DOM结构不一致（比如服务端渲染了v-if="true"的节点，客户端初始data却是false），Vue/React会清空并重建节点——这时你看到的“闪”其实是水合失败后的重绘，不是FOUC，但现象一样刺眼。Lighthouse不会报FOUC，但会标出Hydration failed。
- 检查控制台是否有
[Vue warn] The client-side rendered virtual DOM tree is not matching server-rendered content类警告 - 服务端渲染时确保
data、computed、v-if条件与客户端初始状态完全一致，必要时用key强制替换而非复用 - SSG静态站点若用
getStaticProps返回动态数据，得配revalidate避免CDN缓存陈旧HTML
