rel="preload"+onload是最稳的异步CSS加载方案，它不触发FOUC、不抖动布局、兼容IE11，且无需额外JS库；需带as="style"、置空onload、加回退，漏掉onload注入则样式不会生效。
直接用 rel="preload" + onload 切换 rel 是最稳的方案，它不触发 FOUC、不抖动布局、连 IE11 都能跑，且不需要额外 JS 库。
为什么 rel="preload" + onload 是首选
浏览器对 link[rel="stylesheet"] 的阻塞行为是规范强制的——它必须等 CSSOM 构建完才能继续渲染。而 rel="preload" 本质是“只下载、不解析、不应用”，配合 onload 回调再切回 rel="stylesheet"，就绕过了阻塞，又保证了样式最终被正确注入。
- 必须带
as="style"：否则 Chrome 会降级为普通 fetch，还报 MIME 警告 -
this.onload = null不可省：某些 Android WebView 会重复触发 onload，导致 rel 被反复切换 - 要加
<noscript></noscript>fallback：禁用 JS 时仍能同步加载 - 不能只写
rel="preload"就完事：它本身从不应用样式，漏掉 onload 注入就等于白加载
media="print" 方案的坑比你想象的多
把 media 设成 "print" 再 onload 改成 "all" 看似简单，但实际容易翻车：
- FOUC（Flash of Unstyled Content）风险高：切换时机稍有延迟，用户就能看到未样式化的 HTML 片段
- 媒体查询失效：如果页面已存在
@media print规则，该样式表可能被提前解析或干扰级联顺序 - SSR 不一致：服务端没渲染这个 link，客户端插入后触发重排，Next.js/Nuxt 项目里特别明显
- 部分旧版 Safari 对 media 切换响应慢，甚至忽略 onload
动态插入 <link> 时必须手动控状态
用 JS 创建并插入 link 标签看似灵活，但浏览器不提供原生加载完成信号，得自己补全逻辑：
立即学习“前端免费学习笔记（深入）”；
- 不能只依赖
onload：CORS 错误、404、缓存失效等场景下它常不触发 - 建议搭配
document.styleSheets.length检查 + 轮询sheet.cssRules是否非空（注意跨域 sheet 会报错） - 插入时机选
DOMContentLoaded后，避免干扰主文档流；若需更早，至少包在setTimeout(..., 0)里 - 多个异步 CSS 之间有级联依赖？必须人工控制插入顺序，否则后加载的规则可能被先加载的覆盖
真正难的不是“怎么让它异步”，而是“怎么确保它异步之后，样式依然按预期生效、不闪、不乱序、不漏”。rel="preload" + onload 把这些变量收束到一个可控路径里，其他方案都得靠人肉填坑。
