CSS不能真正异步加载，因其是渲染阻塞资源，需构建CSSOM后才能合成渲染树；可通过rel="preload"提前下载关键CSS，再配合rel="stylesheet"启用，实现类似异步效果。
CSS 文件本身不能像 JavaScript 那样通过 async 或 defer 异步执行，但可以通过 rel="preload" 提前触发下载，从而优化关键 CSS 的加载时机，减少渲染阻塞。
为什么 CSS 不能真正“异步”加载
CSS 是渲染阻塞资源（render-blocking resource）：浏览器必须解析并构建 CSSOM 后，才能与 DOM 合并为渲染树。因此，<link rel="stylesheet"> 默认会同步阻塞 HTML 解析和首次渲染。即使加了 media 属性（如 media="print"），也只是暂时解除阻塞，不适用于屏幕样式。
用 rel="preload" 提前下载关键 CSS
rel="preload" 不是替代 rel="stylesheet"，而是配合使用——它让浏览器在早期阶段（如 HTML 解析时）就发起 CSS 请求，不等待解析到 <link rel="stylesheet"> 才开始下载。
- 写法示例：
<link rel="preload" href="style.css" as="style">
<link rel="stylesheet" href="style.css"> - 必须指定
as="style"，否则浏览器无法正确设置请求优先级和 CORS 行为 - 仅对关键 CSS（如首屏样式）使用，避免预加载非必要资源
- 注意：重复加载同一文件不会出错，但需确保两个
href完全一致（含路径、查询参数）
进阶技巧：动态注入 + preload 模拟“异步 CSS”
若想完全解除 CSS 对首屏渲染的阻塞（例如加载非关键 CSS），可结合 preload 和 JS 动态注入：
立即学习“前端免费学习笔记（深入）”；
- 用
<link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'">实现加载完成即启用 - 或用 JS 监听
load事件后手动设置rel="stylesheet" - 这样能避免阻塞解析，同时保证样式在需要时已就绪（适合非首屏组件样式）
注意事项与兼容性
rel="preload" 在现代浏览器中支持良好（Chrome 50+、Firefox 65+、Edge 79+、Safari 11.1+），但不支持的旧浏览器会忽略该标签，不影响功能降级。务必搭配原始 rel="stylesheet" 使用，确保兼容性。
不要用 rel="prefetch" 替代 preload——后者用于当前导航的关键资源，前者用于未来导航的推测性加载，优先级低且不保证执行时机。
