async不是<link>元素的合法属性，对rel="stylesheet"无效，浏览器会静默忽略并同步阻塞渲染；真正有效的异步CSS加载方案是media="print"配合onload="this.media='all'"。
async 不是 <link> 元素的合法属性，直接写 <link rel="stylesheet" href="a.css" async> 会被浏览器忽略，样式仍同步阻塞渲染。这是最常踩的坑——误以为 CSS 有类似 <script async> 的机制。
为什么不能用 async 加载 CSS
HTML 标准中，<link> 的 async 属性仅对 rel="modulepreload" 或某些实验性类型有效，对 rel="stylesheet" 完全无效。浏览器遇到它会静默丢弃，退回到默认行为：同步加载 + 阻塞渲染树构建。
真正有效的异步 CSS 加载方案：media="print" + onload
这是目前兼容性最好、无需 JS 库、不依赖现代 API 的轻量解法：
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">
-
media="print"告诉浏览器“这跟当前屏幕显示无关”，触发低优先级异步下载，完全不参与关键渲染路径 -
onload在 CSS 文件下载完成时触发，立刻把media切回"all"，样式即时生效 - 必须加
onload="this.media='all'"，否则样式永远不会应用；部分旧版 Safari 需额外加this.onload=null防止重复执行 - 该方式在 Chrome、Firefox、Safari、Edge（2016+）全部支持，连 IE11 都能 fallback（只是降为同步）
什么时候该用这个方案
适用于明确区分「首屏关键 CSS」和「非关键 CSS」的场景：
- 主题切换用的备用皮肤文件（如
dark-theme.css） - 页面底部组件的样式（如评论区、相关推荐模块）
- 打印专用样式（
print.css）本身已用media="print"，天然异步，无需改动 - 字体文件包裹在 CSS 中（如
@font-face引用 base64 WOFF），可借此非阻塞加载
注意：不要把首屏必需的 CSS 放进来，否则用户会看到无样式的“闪屏”或布局跳动。
立即学习“前端免费学习笔记（深入）”；
容易被忽略的副作用：回流与重绘
当 media 从 "print" 切到 "all" 时，浏览器会立即应用新规则，可能触发：
- 局部重绘（paint）——多数情况影响小
- 全局回流（reflow）——如果新 CSS 修改了盒模型、尺寸、浮动等，整个布局可能重排
- 首次无缓存访问时最明显；有缓存后因文件已存在，
onload触发极快，肉眼难察觉
真正复杂的地方在于：你得自己判断哪些 CSS 变更会引发回流，并接受它 —— 毕竟用异步换来的首屏速度提升，通常远大于一次可控的重绘成本。
