放<link>在<head>仍会闪，主要是因CSS文件内含@import导致串行阻塞加载，使首屏关键样式延迟300–800ms就绪；需全局清除@import、内联首屏关键CSS（≤10KB）、非关键CSS用preload+onload并配noscript兜底。
为什么放里还闪？检查是否用了@import
很多项目把<link>塞进<head>就以为万事大吉，结果Chrome里还是看到几帧白板或默认样式——大概率是某个CSS文件里藏了@import。浏览器对@import的处理是串行阻塞的：主CSS加载完、解析到@import语句，才开始拉被引入的文件，中间空档就是FOUC窗口。
- 全局搜索项目中所有
@import，尤其是node_modules里第三方UI库的CSS（比如某些旧版Bootstrap主题） - Webpack/Vite构建产物里检查最终生成的CSS是否含
@import（用grep -r "@import" dist/） - 用
curl -s your-site.com/style.css | head -20直连看线上CSS内容，确认没漏网之鱼
关键CSS内联不是“把所有CSS都塞进去”
内联<style>确实能堵住首屏FOUC，但有人把整个main.css全复制进去，结果HTML体积暴涨、缓存失效、gzip压缩率暴跌。真正要内联的只有首屏渲染必需的那部分：
- 布局容器（
.header、.main的宽高/定位/显示模式） - 字体基础声明（
body的font-family、line-height，避免文字重排） - 按钮/输入框等交互元素的最小尺寸和边框（防止点击区域塌缩）
- 绝对不要内联动画、主题色变量、非首屏组件样式
preload + onload切换样式表容易漏掉noscript兜底
用<link rel="preload" as="style" onload="this.rel='stylesheet'">是主流方案，但生产环境常因两个细节翻车：
- 没加
<noscript><link rel="stylesheet"></noscript>，导致禁用JS的用户永远看不到样式 -
onload回调里没清空this.onload，某些浏览器会重复触发，造成样式加载两次 - Webpack里若启用了
mini-css-extract-plugin，它默认把CSS抽成独立文件，必须关掉或配fallback: 'style-loader'才能让preload生效
v-cloak只防模板暴露，不解决CSS加载延迟
Vue项目里加[v-cloak] { display: none; }后，花括号不闪了，但按钮还是从蓝色变紫色、文字从14px跳到16px——这是CSS本身加载晚导致的，和框架无关。这时候v-cloak只是把问题从“内容闪”转移到“样式闪”，治标不治本。
立即学习“前端免费学习笔记（深入）”；
- 如果用
v-if控制模块显隐，确保该模块的CSS已随关键CSS内联或preload就绪 - SSR场景下注意服务端注入的
<style>是否包含客户端需要的全部规则，否则水合时会补样式引发二次渲染 - 动态import组件（如
defineAsyncComponent）配套的CSS必须走import('./xxx.css')同步加载，不能靠link异步挂载
@import清干净了，若关键CSS里引用了未预加载的Web字体，或者图片没设width/height引发CLS，视觉上仍是“在闪”。 
