<link>标签的onerror事件可实现CSS加载失败时本地回退，但仅Chrome/Firefox支持，IE11不兼容；需确保href指向真实存在的本地CSS路径且Content-Type正确，避免因301重定向、空响应或CSP策略导致失效。
CDN CSS加载失败时如何用onerror触发本地回退
直接在<link>标签上加onerror是最轻量、兼容性最好的 fallback 方案，不需要构建工具或额外脚本。但要注意：这个事件只在资源**完全加载失败**（如 404、网络中断、CORS 拒绝）时触发，不会因样式解析错误或 CDN 重定向（301/302）而触发。
-
onerror必须写在<link rel="stylesheet">上，且this.href赋值要指向一个**可访问的本地路径**，比如/css/bootstrap.min.css或./css/bootstrap.min.css - 本地文件必须真实存在，并被 Web 服务器正确提供（Content-Type:
text/css），否则会陷入“CDN 失败 → 切本地 → 本地又 404”的死循环 - 不要用相对路径如
css/bootstrap.css开头没/或./，容易因 HTML 当前路径不同导致解析失败 - Chrome 和 Firefox 支持该用法，IE11 及更旧版本不支持
onerror于<link>，需搭配其他降级逻辑
为什么onerror有时不生效？常见失效场景
看到控制台报错但样式没切到本地，大概率是以下某一种情况：
- CDN 返回了 301/302 重定向但最终成功加载（比如 jsDelivr 自动跳转到镜像节点）——
onerror不会触发，因为 HTTP 状态码不是失败码 - CDN 返回 200 但内容为空或不是 CSS（比如返回 HTML 错误页），浏览器仍认为“加载成功”，只是解析失败 —— 这种情况
onerror完全无感 -
href里混入不可见字符（如 U+200B 零宽空格、U+2197 ↗ 符号），导致请求 URL 实际无效，但错误发生在 fetch 阶段前，onerror可能不捕获 - 页面使用了 CSP（Content-Security-Policy），禁止了内联事件处理器，
onerror被浏览器静默忽略
更可靠的 fallback：用 JavaScript 动态加载 + 超时兜底
当需要应对重定向、空响应、CSP 限制等复杂情况时，手动创建<link>并设置超时更可控。
- 用
fetch()先探测 CDN URL 是否返回有效 CSS（检查 status === 200 且 headers.get('content-type')?.includes('text/css')） - 若探测失败或超时（建议设 3s），再插入本地
<link>，避免阻塞渲染 - 关键点：动态插入的
<link>必须显式设置rel="stylesheet"，且插入位置要在<head>内，否则部分浏览器不解析 - 示例片段：
const cdnUrl = 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css';<br>const localUrl = '/css/bootstrap.min.css';<br><br>const link = document.createElement('link');<br>link.rel = 'stylesheet';<br>link.href = cdnUrl;<br><br>const timeout = setTimeout(() => {<br> link.href = localUrl;<br>}, 3000);<br><br>link.onload = () => clearTimeout(timeout);<br>link.onerror = () => {<br> link.href = localUrl;<br>};<br><br>document.head.appendChild(link);
生产环境必须检查的两个隐藏细节
回退机制上线后，最容易被忽略的是这两点：
立即学习“前端免费学习笔记（深入）”；
- 本地 CSS 文件是否和 CDN 版本语义一致？比如 CDN 引的是
@5.3.3，本地却放了@5.2.0，class 名或变量名变更会导致样式错乱，这种问题在视觉上难察觉但逻辑已坏 - 构建流程是否清除了本地 CSS 的旧缓存？尤其用 Vite 或 Webpack 时，如果
/css/目录被 gitignore 或未纳入构建输出，上线后 fallback 其实指向 404
