最轻量稳妥的异步css加载方式是，利用media="print"使浏览器降级为低优先级异步下载、不阻塞渲染，onload后切回media="all"立即生效。
直接用 <link rel="stylesheet" href="xxx.css" media="print" onload="this.media='all'; this.onload=null;"> 就行，不用额外 JS、不阻塞渲染、兼容所有现代浏览器——这是目前最轻量也最稳妥的异步 CSS 加载方式。
为什么 media="print" 能绕过渲染阻塞
浏览器只对 media="all" 或匹配当前设备的媒体类型（如 screen）强制同步解析 CSS；print 是一个真实但当前不匹配的媒体类型，所以下载完全不参与关键渲染路径。等文件加载完成触发 onload，再把 media 改回 all，样式就立刻进入 CSSOM 构建流程。
常见错误现象：
-
media="bogus"或media="only x"在旧版 Safari 中不触发onload - 漏写
this.onload = null，缓存复用或重复插入时会多次执行切换逻辑 - 把这行
<link>写在里——必须放在中，否则预加载器无法识别
rel="preload" + onload 切换 rel 的三要素缺一不可
rel="preload" 本身只下载不应用，设计就是“提前取货”，不是“立刻上架”。漏掉任一环节，CSS 就不会生效，页面可能白屏或布局坍塌。
必须同时满足：
-
rel="preload"—— 声明预加载意图 -
as="style"—— 否则 Chrome/Firefox 降级为普通 fetch，Safari（iOS 16.4 / macOS 13.3 之前）直接忽略 -
onload="this.onload=null; this.rel='stylesheet'"—— 下载完成后立即启用，且防重复执行
还要配 <noscript><link rel="stylesheet" href="xxx.css"></noscript>，JS 被禁用时退回到传统加载，否则样式彻底丢失。
动态插入时容易失效的边界情况
如果你是通过 JS 动态创建 <link>（比如在 DOMContentLoaded 后），内联 onload 属性不会生效，得手动绑定：link.addEventListener('load', () => { ... })。
其他关键点：
- 多个同名 CSS 并发加载时，插入顺序影响层叠优先级——务必按依赖顺序
append，别用document.write - 服务端渲染（SSR）页面中，若首屏依赖该 CSS，仍会出现 FOUC；这类样式应保留在同步
<link rel="stylesheet">中 - 构建工具（如 Webpack/Vite）若 CSS 路径带 hash，需确保
href在preload和noscript中完全一致（包括查询参数），否则 CDN 或缓存场景下可能 404
非关键 CSS 里藏了字体或大图，异步也救不了首屏
就算你把 non-critical.css 延迟加载了，如果它里面写了 @font-face 引了一个 2MB 的 .woff2，或 background-image 指向高延迟 CDN 图片，这些子资源会在该 CSS 挂载后才开始拉取——而它们的下载会挤占首屏 JS/CSS 的带宽，拖慢交互就绪时间。
检查重点：
- 非关键 CSS 中是否含字体、图标、大图等渲染阻塞型资源
- 是否用了
@import—— 它会同步阻塞该 CSS 的解析，形成隐蔽的二级阻塞链 - 若必须引入字体，优先用
font-display: optional；图片加loading="lazy"
真正难的不是怎么写那行 <link>，而是判断哪些 CSS 真的「非关键」，以及它内部有没有偷偷拖后腿的子资源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
