FOUC 根源是 HTML 先渲染后加载 CSS，解决方法：内联首屏关键 CSS（≤14KB），用 preload 提前加载主样式表，禁用 JS 延迟主题切换，优化字体/图标/CSS-in-JS 加载策略。
页面刷新时样式闪一下（FOUC，Flash of Unstyled Content），通常是因为浏览器先渲染了未加载完 CSS 的 HTML，等样式加载后再重绘。将关键 CSS 内联到 <head> 中，能确保首屏内容在首次绘制时就带样式，从根源上避免闪烁。
内联“首屏关键CSS”
不是把整个 CSS 文件都塞进 <style>，而是提取影响首屏（Above-the-Fold）渲染的最小必需样式，比如头部、导航、首屏标题/按钮的字体、颜色、布局规则。可用工具如 critical 自动提取，或手动梳理后内联：
- 用构建工具（如 Webpack/Vite）在构建时生成关键 CSS 并注入 HTML 模板
- 服务端渲染（SSR）项目可在模板中直接写入预计算好的关键样式
- 注意控制体积：内联 CSS 建议不超过 14KB（避免阻塞 HTML 解析过久）
配合 preload 提前加载完整 CSS
内联只解决首屏，后续样式仍需加载。用 <link rel="preload"> 提示浏览器高优先级获取主样式表，减少样式切换延迟：
<link rel="preload" href="/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">- 配合
onload回调动态切换rel，避免阻塞渲染 - 避免在
<head>中直接写<link rel="stylesheet">（会阻塞渲染）
禁用 JS 驱动的样式切换逻辑
有些项目用 JS 动态加 class 或切换主题，若执行晚于首次渲染，也会造成视觉跳变：
立即学习“前端免费学习笔记（深入）”；
- 把主题类（如
dark）直接写在<html>标签上，由服务端或初始 HTML 决定 - 避免在
DOMContentLoaded后才去读取 localStorage 并切主题 - 如必须 JS 控制，可加
style[media="print"]占位 + JS 加载后移除，实现平滑过渡
检查第三方资源干扰
某些字体、图标库或 CSS-in-JS 库（如 styled-components）可能异步注入样式，导致二次重绘：
- 字体用
font-display: swap防止文本不可见，但要搭配本地字体 fallback - 图标字体建议转为 inline SVG，消除外部 CSS 依赖
- CSS-in-JS 项目启用 SSR 支持，确保服务端已生成并内联样式
