rel="preload"不能实现CSS异步加载，它仅提前下载而不延迟解析应用；真正异步需用rel="stylesheet"配合disabled属性与onload事件动态启用。
rel=preload 不能实现 CSS 异步加载，它只是预加载
直接说结论：rel="preload" 不会“延迟执行”CSS，更不会让 CSS 异步加载；它只是提前触发下载，但浏览器仍会**同步阻塞渲染**地解析和应用该 CSS。如果你期望的是“不阻塞首屏渲染、等页面就绪后再加载样式”，rel="preload" 单独使用完全达不到目的，反而可能加重阻塞——因为预加载后紧接着就解析，时间点更不可控。
真正异步加载 CSS 的标准做法：rel=stylesheet + onload + disabled 切换
核心思路是：先用 <link rel="stylesheet"> 下载 CSS，但不让它立即生效；等加载完成再启用。关键靠 disabled 属性 + onload 事件：
-
rel="stylesheet"保持可下载（浏览器识别为样式资源） - 初始设
disabled="true"，阻止解析和应用 - 监听
onload（注意：不是onreadystatechange，IE11+ 支持 onload） - 回调中设
disabled = false，样式才真正生效
示例：
<link rel="stylesheet" href="async.css" disabled onload="this.disabled=false">
注意：不要用 rel="preload" 混搭这个方案——preload 不触发 onload，且无法控制启用时机。
立即学习“前端免费学习笔记（深入）”；
为什么不用 rel=preload + rel=stylesheet 双标签？
常见误解是先 preload 再 stylesheet 来“加速”。实际问题很多：
- 重复请求风险：如果两个
<link>的href完全一致，现代浏览器通常会复用，但若存在 query 参数差异（如?v=1vs?v=2），就真发两次请求 - 缓存失效干扰：
preload的缓存策略独立于后续stylesheet请求，可能命中不同缓存层级 - 无实质收益：CSS 本身已是高优先级资源，
preload带来的提前几毫秒下载，在真实网络下几乎不可测，却引入了额外复杂度和潜在竞态
兼容性与 fallback 要点
这个方案在 Chrome 45+、Firefox 47+、Safari 11.1+、Edge 16+ 均可用；IE10/11 支持 onload，但需注意：
- IE 中
disabled切换后，部分旧版需手动触发重绘（极少场景需要，一般无需处理） - 如果必须支持 IE9 及更早，只能退回到动态创建
<link>+onload+ 插入 DOM 的方式（IE9+ 支持link.onload） - 务必确保异步 CSS 不含首屏必需样式——否则会出现 FOUC（内容闪动），尤其当 JS 执行延迟时
最易被忽略的一点：异步 CSS 中的 @import 仍会同步阻塞，且无法被 disabled 控制；如有嵌套，整个链路就失去异步意义。
