FOUC（无样式内容闪烁）

定义

FOUC（Flash of Unstyled Content，无样式内容闪烁）指网页在 CSS 尚未加载或应用完成时，先以浏览器默认样式短暂呈现，随后样式生效导致页面外观突变的现象。

成因

• 样式表引入过晚或通过脚本异步注入（部分 CSS-in-JS 方案）；
• @import 串行加载拖慢 CSSOM 构建；
• 旧版 IE 的实现缺陷（该词即源于此时期）；
• 服务端渲染页面在客户端水合前后样式不一致。

相关现象

字体加载领域有对应的 FOIT（不可见文本闪烁：字体未就绪时文本隐藏）与 FOUT（无样式文本闪烁：先用后备字体再切换），可用 font-display 属性权衡取舍。

规避方法

• 在 head 中尽早以 link 标签引入关键样式；
• 内联首屏关键 CSS；
• 避免依赖 JavaScript 注入首屏样式；
• 对字体使用预加载与 font-display: swap 等策略。

样式突变还会推高 CLS 指标，因此 FOUC 治理也是性能优化的一环。