preload能异步加载CSS是因为它提前触发下载而不阻塞渲染，但需手动插入才能生效；必须写as="style"、路径一致、仅用于关键CSS，并配noscript降级和JS超时兜底。
preload 为什么能“异步加载 CSS”
它不能真正异步执行 CSS，但能提前触发下载，避免阻塞渲染。浏览器默认会同步加载 <link rel="stylesheet">，遇到就暂停 HTML 解析、等待 CSSOM 构建完成。而 rel="preload" 告诉浏览器：“这个 CSS 很重要，现在就去下，别管顺序”，下载完也不会自动应用——得你手动插入。
怎么写 preload 才不白忙活
常见错误是只加 rel="preload" 却没后续动作，结果文件下了但压根没用上。必须配合 JS 动态插入 <link rel="stylesheet"> 才算闭环。
-
as="style"必须写，否则浏览器不会提升优先级，甚至可能忽略 preload -
href路径要和最终插入的<link>完全一致（包括查询参数），不然缓存不复用 - 不要对所有 CSS 都 preload：只用于首屏关键样式（如
base.css、header.css），非关键资源用rel="prefetch" - 避免在
<head>里写<script>立即插入——它会阻塞解析；推荐用onload回调或requestIdleCallback延后插入
<link rel="preload" as="style" href="critical.css" onload="this.onload=null;this.rel='stylesheet'"> <noscript><link rel="stylesheet" href="critical.css"></noscript>
preload + media 属性控制加载时机
用 media 可以让 preload “条件触发”：比如只在打印时预加载打印样式，或只在匹配 (prefers-reduced-motion: reduce) 时加载简化版 CSS。但注意：media 影响的是“是否下载”，不是“是否应用”——只要匹配，就会发起请求。
-
media="print"：仅当用户打开打印预览时才触发 preload 请求 -
media="(min-width: 768px)"：仅在视口 ≥ 768px 时下载，小屏设备跳过 - 动态切换 media 值不会重新触发 preload，已下载的资源会缓存，但不会自动应用
兼容性与 fallback 容易被忽略的点
rel="preload" 在 Safari 11.1+、Chrome 50+、Firefox 56+ 支持，IE 全系不支持。但问题不在“不支持”，而在“静默降级”——不支持的浏览器直接忽略 rel="preload"，如果你没配 <noscript> 或 JS fallback，关键样式就彻底丢失了。
立即学习“前端免费学习笔记（深入）”；
- 必须提供降级路径：
<noscript><link rel="stylesheet" href="critical.css"></noscript> - JS 插入逻辑要检测
document.currentScript是否存在，老版本 Android WebView 里可能为 null - 不要依赖 preload 的 onload 事件在所有浏览器中准时触发：Firefox 有时延迟明显，建议加超时兜底
最麻烦的其实是缓存一致性——preload 下载的 CSS 和后续插入的 <link> 必须完全同源同路径同哈希，否则可能重复下载或样式错乱。这点调试起来不报错，但页面表现会飘忽不定。
