避免 fouc 的核心是控制样式加载时机与渲染同步：提前在路由解析阶段注入，用 link.onload 监听完成，配合临时 style 标签占位，并确保 ssr 时首屏 css 预置，同时添加 link.onerror 降级处理。
动态加载 CSS 文件时如何避免 FOUC（闪白）
直接通过 document.createElement('link') 插入样式表，浏览器会异步加载，但页面可能在样式就绪前完成渲染，导致短暂无样式状态。关键不是“能不能加”，而是“什么时候加、加完怎么通知”。
- 用
link.onload而非link.onreadystatechange判断加载完成（后者在 Firefox 中不可靠） - 插入
<link>前，先给添加一个临时style标签，设置关键选择器的最低可见样式（如body { opacity: 0; transition: opacity .2s; }），等样式加载完再移除或改回opacity: 1 - 避免在 React/Vue 组件挂载后才开始加载 CSS——应在路由解析阶段（如
beforeEach或loadRoute）提前触发，留出缓冲时间
Vue/React 中配合路由做 CSS 按需加载的实操要点
单页应用的样式按需，本质是“路由级 chunk 对应样式 chunk”，不能只靠 JS 动态 import，CSS 必须同步注入。
- Webpack 构建时，确保
mini-css-extract-plugin的chunkFilename与 JS chunk 同名（如[name].css），否则import('./PageA').then(...)不会自动带出对应 CSS - Vue Router 中，
component: () => import('./PageA.vue')已隐式支持 CSS 提取；若手动控制样式加载，需在defineAsyncComponent的loading阶段用fetch('/static/css/PageA.css').then(r => r.text()).then(css => { document.head.appendChild(Object.assign(document.createElement('style'), {textContent: css})) })——但这种方式绕过构建流程，丢失 source map 和 hash - React + React Router v6：在
lazy(() => import('./PageA'))外层封装一个loadStyles('PageA')函数，返回 Promise.all([JS 加载, CSS 加载])，确保两者都 resolve 后才渲染组件
使用 import('./xxx.css') 为什么有时不生效
ES module 动态导入 CSS 是合法语法，但行为高度依赖构建工具配置和运行时环境。
- Webpack 5+ 默认支持
import('./a.css')，但需启用css-loader+style-loader（开发时）或MiniCssExtractPlugin.loader（生产时）；否则会报Cannot find module './a.css' - Vite 中
import('./a.css')可直接工作，但仅限于构建时能静态分析到的路径；若路径含变量（如import(`./${name}.css`)），Vite 会警告并跳过，此时必须改用const link = document.createElement('link'); link.href = `/base/${name}.css`; document.head.append(link); - 注意：Node.js 环境下该语法会直接报错，SSR 渲染阶段不能执行，必须包裹在
if (typeof window !== 'undefined')中
服务端预渲染（SSR）场景下如何处理动态 CSS
客户端动态加载的 CSS，在首屏直出 HTML 时并不存在，会导致样式缺失或水合错乱。
立即学习“前端免费学习笔记（深入）”；
- Next.js / Nuxt 等框架已内置处理：组件内
import的 CSS 会被收集进getServerSideProps或setup()的 style 注入链，无需手动干预 - 自研 SSR 时，需在服务端模拟模块解析，提取组件依赖的 CSS 路径，拼入初始 HTML 的
；可借助webpack-stats.json查找chunks对应的assetsByChunkName，匹配路由组件名获取 CSS 文件名 - 若某组件只在用户交互后才加载（如点击弹窗），其 CSS 不应出现在首屏 HTML 中，但需确保客户端加载时不会触发重复插入——可用
document.querySelector(`link[href="${cssUrl}"]`)先检查是否存在
link.onerror 监听，或监听了但没做降级（比如 fallback 到全局基础样式），一旦 CDN 抽风或路径写错，整个页面就裸奔。 
