FOUC 根源是 HTML 先渲染后加载 CSS，解决方法：内联首屏关键 CSS（≤14KB），用 preload 提前加载主样式表，禁用 JS 延迟主题切换，优化字体/图标/CSS-in-JS 加载策略。

页面刷新时样式闪一下（FOUC，Flash of Unstyled Content），通常是因为浏览器先渲染了未加载完 CSS 的 HTML，等样式加载后再重绘。将关键 CSS 内联到 中，能确保首屏内容在首次绘制时就带样式，从根源上避免闪烁。

内联“首屏关键CSS”

不是把整个 CSS 文件都塞进 ，而是提取影响首屏（Above-the-Fold）渲染的最小必需样式，比如头部、导航、首屏标题/按钮的字体、颜色、布局规则。可用工具如 critical 自动提取，或手动梳理后内联：

• 用构建工具（如 Webpack/Vite）在构建时生成关键 CSS 并注入 HTML 模板
• 服务端渲染（SSR）项目可在模板中直接写入预计算好的关键样式
• 注意控制体积：内联 CSS 建议不超过 14KB（避免阻塞 HTML 解析过久）

配合 preload 提前加载完整 CSS

内联只解决首屏，后续样式仍需加载。用 提示浏览器高优先级获取主样式表，减少样式切换延迟：

• 配合 onload 回调动态切换 rel，避免阻塞渲染
• 避免在 中直接写 （会阻塞渲染）

禁用 JS 驱动的样式切换逻辑

有些项目用 JS 动态加 class 或切换主题，若执行晚于首次渲染，也会造成视觉跳变：

• 把主题类（如 dark）直接写在 标签上，由服务端或初始 HTML 决定
• 避免在 DOMContentLoaded 后才去读取 localStorage 并切主题
• 如必须 JS 控制，可加 style[media="print"] 占位 + JS 加载后移除，实现平滑过渡

检查第三方资源干扰

某些字体、图标库或 CSS-in-JS 库（如 styled-components）可能异步注入样式，导致二次重绘：

• 字体用 font-display: swap 防止文本不可见，但要搭配本地字体 fallback
• 图标字体建议转为 inline SVG，消除外部 CSS 依赖
• CSS-in-JS 项目启用 SSR 支持，确保服务端已生成并内联样式