<link rel="stylesheet">的onerror不生效，因浏览器规范明确忽略其错误事件；可靠fallback需用<link rel="preload" as="style">配合JS启用主样式或注入内联降级样式，或用fetch+AbortController动态加载并设超时。
直接用 <link rel="stylesheet"> 无法可靠 fallback，浏览器根本不触发 onerror；必须用预加载 + JS 控制启用，或 fetch 动态注入内联样式。
为什么 onerror 在 <link rel="stylesheet"> 上不生效
Chrome、Firefox、Safari 全部忽略 <link rel="stylesheet" onerror="fallback()"> —— 这不是 bug，是规范行为。浏览器把样式加载视为“非阻塞但不可监听”的过程，onerror 只对 <img>、<script> 等资源有效。
常见错误现象：
- 写了
onerror却完全没执行，控制台也无报错 - 误以为状态码 404/timeout 会自动触发回调，实际静默失败
- 在本地
file://协议下测试，连请求都发不出（被浏览器策略拦截）
用 <link rel="preload" as="style"> 实现可控 fallback
这是目前兼容性最好（IE11+）、逻辑最清晰的方案：用 preload 做探测，再由 JS 决定启用主样式还是插入降级样式。
立即学习“前端免费学习笔记（深入）”；
实操要点：
- 先写一个 disabled 的主样式链接：
<link id="main-css" rel="stylesheet" disabled href="https://cdn.example.com/main.css"> - 紧跟其后放预加载标签：
<link rel="preload" as="style" href="https://cdn.example.com/main.css" onload="enableMain()" onerror="loadFallback()"> -
enableMain()中执行document.getElementById('main-css').disabled = false -
loadFallback()必须插入内联样式（不能是另一个<link>），例如：document.head.insertAdjacentHTML('beforeend', '<style id="fallback-style">body{font-size:16px;color:#333;}</style>') - fallback 样式体积建议 ≤2KB，避免阻塞渲染
用 fetch + AbortController 控制超时与重试
当需要区分“超时”“CORS 拒绝”“403”等具体失败类型，或需切源重试时，fetch 是唯一可控路径。
关键注意事项：
- 必须用
AbortController设超时，不要用setTimeout手动 abort —— fetch 可能已 resolve 但未执行 then - fetch 到 CSS 文本后，**不能直接用
insertRule注入复杂规则**（会丢失@import、url()解析）；应创建<style>并设textContent - 若 fallback 需复用原 CSS 解析逻辑（如含
@media、变量），应动态创建新<link>指向本地备份，而非内联文本 - 注意 CSP 限制：
fetch受connect-src约束，CDN 域名必须在策略中显式放行
降级样式必须在主 CSS 加载前就生效
所谓“备用”，不是等主 CSS 失败后再补，而是提前声明、抢占渲染时机。任何依赖 DOM ready 或 window.onload 的插入时机都太晚——FOUC 已发生，用户已看到无样式内容。
容易被忽略的点：
- fallback
<style>必须放在<head>中，且位置早于所有可能触发渲染的脚本 - 不要把降级样式写在
@import后面：整块<style>可能被旧版 Safari 跳过 - 若用构建工具（Vite/Webpack），确保降级脚本执行时机晚于它注入的
<link>，否则 ID 查找不到 - IE11 不支持
CSS.supports()，做特性检测前必须先if (CSS && CSS.supports)判断存在性
