media="print"是兼容性最佳的原生异步css加载方式，需写在中并配onload切换media为all；preload+as="style"可提前下载但需回退；禁用@import；内联关键css是前提。
用 media="print" 触发浏览器异步加载机制
浏览器看到 media="print" 会直接跳过该 CSS 的关键渲染路径，不阻塞 HTML 解析、DOM 构建和首屏渲染——这是原生支持、无需 JS、兼容性最好的异步加载方式。它不是“假装不重要”，而是利用浏览器对媒体查询不匹配时的降级策略。
必须把这行写在 中，否则预加载器无法识别；onload 回调里要同时改 this.media = 'all' 和清空 this.onload = null，否则缓存命中时可能反复触发切换。
- 错误写法：
<link rel="stylesheet" href="modal.css" media="print">（漏onload，样式永远不会生效） - 危险写法：
<link rel="stylesheet" href="modal.css" media="bogus" onload="this.media='all'">（media="bogus"在旧版 Safari 不触发onload） - 正确写法：
<link rel="stylesheet" href="modal.css" media="print" onload="this.media='all'; this.onload=null;">
用 rel="preload" + as="style" 提前拉取并可控启用
这个方案适合你明确知道非关键 CSS 必然会在后续某个交互中用到（比如弹窗打开、Tab 切换），且希望它比 media="print" 更早开始下载（更高优先级）。但它不是“开箱即用”：缺 as="style" 就等于普通 fetch，Chrome/Firefox 都不会复用资源，更不会触发 CSSOM 解析。
IE 完全不支持 rel="preload"，必须加 <noscript></noscript> 回退；而且 onload 只代表下载完成，CSSOM 解析和应用仍有延迟，不能假设样式立刻可用。
- 错误写法：
<link rel="preload" href="charts.css" onload="this.rel='stylesheet'">（没as="style"，白 preload） - 正确写法：
<link rel="preload" href="charts.css" as="style" onload="this.rel='stylesheet'"> - 回退建议：在
<noscript></noscript>里放一个常规<link rel="stylesheet">，确保 IE 用户仍有样式
别用 @import 做条件加载
@import 是同步阻塞的，无论写在 <style></style> 里还是外部 CSS 中，都会造成串行瀑布加载（A.css @import B.css → 等 A 下完再发 B 请求），完全违背异步目标。即使加上媒体查询如 @import url(x.css) screen and (min-width:768px);，浏览器仍会下载该文件，只是不应用规则——带宽和时间都浪费了。
真正需要按设备/主题加载时，应直接拆成多个 <link>，用 media 属性做原生条件分发，例如：<link rel="stylesheet" href="dark-theme.css" media="(prefers-color-scheme: dark)">，浏览器只在匹配时才下载。
内联关键 CSS 是异步加载的前提
异步加载非关键 CSS 的前提是：首屏必需样式已内联。如果连 .header、.hero 这类基础结构样式都还在外部文件里，那任何异步技巧都救不了首屏白屏。内联部分建议控制在 gzip 后 4–8KB，超过就该重新评估哪些真算“关键”。
构建时可用 Critical 工具自动提取，但要注意：动态渲染区域（如 React/Vue 挂载点）的“首屏”需结合 SSR 或 hydration 分析，不能只靠静态 HTML 截图判断。
容易被忽略的一点是：哪怕用了异步加载，如果关键 CSS 内联内容里有 @font-face 或大量 url() 引用，仍可能引发额外阻塞或 FOIT/FOUT——这些资源本身也要走网络请求，得一并纳入关键路径评估。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
