<link>放在<head>仍会闪屏，因CSS加载延迟（如@import嵌套、网络慢、动态插入）导致FOUC；需内联关键样式、异步加载非关键样式，并配置font-display:swap等优化字体加载。
为什么 <link> 放在 <head> 还是会闪屏
不是放了就一定不闪。浏览器渲染流程中，CSS 是阻塞渲染的资源，但「阻塞」不等于「即时生效」——如果样式表体积大、网络慢、或存在 @import 嵌套，<link> 虽在 <head>，仍可能在首屏内容已开始绘制后才加载完成，导致 DOM 先以无样式状态渲染（FOUC），再重绘为样式化结果，形成肉眼可见的闪动。
检查是否用了 @import 或异步加载逻辑
@import 在 CSS 文件内引入其他样式时，会阻塞后续规则解析，且无法被浏览器预加载器识别，极易拖慢整体 CSS 就绪时间。另外，某些构建工具（如 Webpack）若配置了 style-loader 的 injectType: 'lazyStyleTag'，或手动用 JS 动态插入 <link>，都会绕过 HTML 解析阶段的预加载，造成样式延迟注入。
- 打开 DevTools → Network → Filter
css，看样式文件是否在DOMContentLoaded之后才完成 - 搜索项目中所有
@import语句，尤其注意第三方 CSS 包是否自带嵌套@import - 检查构建配置：Webpack 中确认
mini-css-extract-plugin是否启用；Vite 中确认未误配css.inline或插件强制懒加载
确保关键样式内联 + 非关键样式异步加载
首屏所需样式必须「零等待」——即在 HTML 中直接内联（<style>），其余非关键样式才用 <link rel="preload"> 或 media="print" onload="this.media='all'" 方式延迟加载，避免阻塞主渲染流。
<head>
<!-- 关键 CSS 内联 -->
<style>
.header { color: #333; }
.hero { background: #f0f0f0; }
</style>
<p><!-- 非关键 CSS 异步加载 -->
<link rel="preload" href="non-critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="non-critical.css"></noscript>
</head>验证字体与图片加载是否触发二次重绘
CSS 闪屏有时并非样式本身问题，而是字体（@font-face）或背景图加载完成后替换内容，导致局部重排重绘。浏览器默认对未加载字体使用后备字体（如 serif），等自定义字体就绪后突然切换，视觉上就像“闪一下”。
立即学习“前端免费学习笔记（深入）”；
- 给
@font-face添加font-display: swap，让文本先用系统字体显示，字体加载完再换 - 避免在关键 CSS 中用
background-image指向大图；改用占位色 + JS 懒加载真实图片 - 检查是否用了
will-change: transform等触发合成层的属性，某些旧版 Chrome 在样式切换时会短暂回退到 CPU 渲染，加剧闪烁感
关键点往往藏在「你以为已经解决」的地方：比如你确认 <link> 在 <head>，却没注意到它引用的 CSS 里有三处 @import，或者字体加载策略没配 font-display。这些细节不排查，光挪位置没用。
