异步引入CSS本身会触发FOUC，真正方案是内联关键CSS（≤10KB、置于head顶部）、非关键CSS用media="print" onload="this.media='all'"预加载并切换，同时确保Content-Type为text/css且消除@import。
异步引入 CSS 本身就会触发 FOUC，不存在“安全异步”的写法；真正要做的，是把关键样式同步提供、非关键样式延迟加载但不干扰首帧渲染。
为什么 rel="stylesheet" 加 async 或 defer 无效
浏览器根本不支持对 <link rel="stylesheet"> 使用 async 或 defer —— 这两个属性只对 <script></script> 生效。强行加上去，浏览器会忽略，仍按默认阻塞行为处理（即：在解析 HTML 时暂停，等 CSS 下载并解析完再继续）。所以所谓“异步引入 CSS”，本质是伪命题。
用 media="print" 实现预加载不阻塞
这是目前最兼容、最稳妥的“非关键 CSS 延迟加载”方案，核心是欺骗浏览器：先让它预加载，但不应用；加载完成再切换为 media="all" 触发应用。
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">- 必须配
<noscript><link rel="stylesheet" href="non-critical.css"></noscript>，否则 JS 被禁用时样式彻底丢失 - 注意：
onload是原生事件，不要用addEventListener替代——Safari 对动态绑定的load事件支持不稳定 - 如果用构建工具（如 Vite），推荐用
critters插件自动生成该模式，避免手写出错
内联关键 CSS 是不可绕过的前提
哪怕你把非关键 CSS 控制得再好，只要首屏必需的规则（比如 .header、.hero、基础重置、[v-cloak]）没内联，FOUC 就必然发生。
立即学习“前端免费学习笔记（深入）”；
- 内联体积必须 ≤10KB（移动端保守值），超了反而阻塞 HTML 解析
-
<style></style>必须放在最顶部，早于任何<script></script>或<link> - 不能加
media属性（包括media="all"），否则浏览器跳过阻塞逻辑 - 验证是否真关键：Chrome DevTools → Coverage tab → 刷新页面 → 只保留绿色高亮部分；
@font-face、复杂伪类、懒加载模块的变量定义，都不该进内联块
最容易被忽略的硬性条件：Content-Type 和 @import
哪怕你内联了全部关键 CSS，只要外链 CSS 返回的响应头是 Content-Type: text/plain，浏览器就拒绝解析，FOUC 照样发生。同样，任何 @import 都会让预加载器失效——它无法提前发现被导入的文件，只能串行加载。
- 检查 Network 面板里每个 CSS 请求的 Response Headers，确认是
text/css - Tailwind/Bootstrap 项目里，必须手动替换所有
@import为<link>，否则构建产物仍含@import - 动态主题切换不能等到
DOMContentLoaded后读取localStorage再插入<link>——此时 HTML 已渲染完毕，闪一次不可避免
FOUC 不是加载慢的问题，而是浏览器首次绘制前没拿到首屏必需样式规则的必然结果；解决它不靠“更快加载”，而靠“更早提供”。内联 + 预加载切换 + 响应头校验，三者缺一不可。
