什么是 FOUC？如何避免？

1. FOUC（Flash of Unstyled Content，文档样式短暂失效）

在引用 CSS 的过程中，如果方法不当或者位置引用不对，会导致某些页面在 Windows 下的 IE 出现一些奇怪的现象，以无样式显示页面内容的瞬间闪烁，这种现象称之为文档样式短暂失效，简称 FOUC。

2. 原因

当样式表晚于结构性 HTML 加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。常见触发场景：

  • 使用 @import 引入 CSS；
  • 把 <link rel="stylesheet"> 放在了 <body> 之后；
  • CSS 与 JS 异步加载顺序未控制好。

3. 解决方法

  • 使用 <link> 标签将样式表放在文档 <head> 中；
  • 尽量避免使用 @import，改用 <link>；
  • 关键 CSS 内联（Critical CSS），非关键 CSS 异步加载。

补充：

  • FOUC 在现代浏览器中已较少见，但 SSR 项目或主题切换瞬间仍可能出现类似闪烁。
  • Next.js / Nuxt 这类框架默认会把关键 CSS 内联到 HTML 中，从根源上避免 FOUC。
  • 配合 font-display: swap 等字体加载策略可以进一步缓解 FOIT（Flash of Invisible Text）。