FOUC（Flash of Unstyled Content）是HTML先渲染而CSS未就绪导致的内容闪现现象，主因是样式表未在head中提前声明或加载延迟；解决核心是将关键CSS内联、非关键CSS异步加载，并优化资源调度与网络传输。
FOUC 是什么，为什么它会在 CSS 引入时发生
FOUC（Flash of Unstyled Content）不是浏览器 bug，而是加载顺序的自然结果：HTML 渲染引擎遇到 <body> 就开始解析并绘制，但若 <link rel="stylesheet"> 放在 <body> 里或异步加载，样式表还没就位，内容就先以默认样式“闪”出来了。
关键点在于：CSS 是渲染阻塞资源，但它的阻塞效果只在它被提前声明的前提下才生效。放错位置 = 主动放弃阻塞权。
把 <link> 放进 <head> 是底线，但还不够
仅放进 <head> 只能避免最基础的 FOUC；如果样式文件体积大、CDN 延迟高、或用了 media 属性（比如 media="print"），浏览器仍可能跳过加载，导致首屏无样式。
-
<link rel="stylesheet" href="main.css">必须在<head>内，且尽量靠前（早于<script>） - 避免用
media做条件加载（如media="(min-width: 768px)"），除非你明确接受该断点下的 FOUC 风险 - 不要用
@import在 CSS 文件里引入其他样式 —— 它会串行加载，放大阻塞时间 - 慎用
rel="preload"加载 CSS：必须搭配as="style"和onload注入逻辑，否则无效甚至报错
内联关键 CSS（Critical CSS）是真正有效的缓解手段
所谓“关键 CSS”，是指首屏渲染必需的那部分样式规则（比如 .header、.hero-banner、字体定义、重置类）。把它内联进 HTML 的 <head>，就能绕过网络请求，确保首屏零延迟应用样式。
立即学习“前端免费学习笔记（深入）”；
注意：这不是“把所有 CSS 都 inline”，而是精准提取 + 自动化生成。手动维护极易过期。
- 工具推荐：
critters（Vite/webpack 插件）、critical（Node CLI）、或 Next.js / Nuxt 等框架内置的自动 critical 提取 - 内联部分应限制在 ~14KB（HTTP/2 下更宽松，但移动端仍建议压到 10KB 内）
- 后续非关键 CSS 用
<link rel="stylesheet" media="print" onload="this.media='all'">异步加载，避免阻塞渲染 - 若用
document.write或 JS 动态插入<link>，FOUC 几乎必然发生 —— 浏览器不认为那是“预加载提示”
HTTP/2 Server Push 已淘汰，别再依赖它
Server Push 曾被当作 FOUC 解法之一，但实际中它干扰缓存、浪费带宽、难以控制优先级，主流服务器（Nginx、Apache）和浏览器（Chrome 96+）已默认禁用。现在强行配置，反而可能触发 ERR_HTTP2_PUSH_DISABLED 或被忽略。
替代方案更务实：
- 启用 HTTP/2 或 HTTP/3（天然多路复用，减少连接竞争）
- 开启 Brotli 压缩（比 Gzip 平均再省 15% CSS 体积）
- 确保 CDN 缓存命中率高 —— 关键 CSS 路径别带随机 query 参数（如
?v=123） - 使用
Link: </css/main.css>; rel=preload; as=style响应头（比 HTML 中写<link>更早触发下载）
FOUC 表面是样式加载慢，根子是资源调度与渲染管线的错配。最容易被忽略的，其实是开发环境本地服务器没开压缩、没设缓存头，导致你根本测不出线上真实 FOUC 模式 —— 上线前务必用 Lighthouse 的 “Disable cache” + “Slow 3G” 条件跑一遍首屏录制。
