CDN加载失败后需用JavaScript动态插入备用CSS，因link标签无法监听加载失败；应使用onerror事件或fetch预检实现降级，注意CORS、CSP及路径一致性，并确保本地CSS与CDN版本完全同构。
CDN加载失败后如何 fallback 到本地 CSS
直接用 <link> 标签无法监听加载失败，所以不能靠它自动降级。必须用 JavaScript 主动检测、动态插入备用资源。
- 核心思路：先尝试加载 CDN 资源，用
document.createElement('link')+onload/onerror监听结果 - 只对关键 CSS（如重置、基础布局）做降级；字体、图标等非阻塞资源可忽略 fallback
- 避免在
里提前写死本地路径——否则 CDN 正常时也会多加载一次
用 link 的 onerror 事件实现简单降级
现代浏览器支持 link 元素的 onerror，但注意：它只在资源返回 4xx/5xx 或网络中断时触发，**不触发跨域拒绝（CORS）或 CSP 阻止的情况**。
- 必须把
link插入 DOM 后才可能触发onerror，不能只创建不挂载 - 降级路径建议用相对路径（如
./css/base.css），避免硬编码域名，方便本地开发和部署一致 - 示例代码：
<script> const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = 'https://cdn.example.com/v1.2.3/base.css'; link.onerror = () => { link.href = './css/base.css'; }; document.head.appendChild(link); </script>
更健壮的方案：用 fetch 预检 + insertRule 或动态 link
当需要处理 CORS、CSP 或想统一控制加载顺序时，fetch 更可控，但不能直接注入 CSS 文本到样式表（会丢失 @import 和 url() 解析）。
- 若 CSS 文件较小且无外部依赖，可用
fetch获取文本，再用document.styleSheets[0].insertRule()注入（仅限规则，不推荐复杂样式） - 更通用做法：fetch 成功后动态创建
link并插入，失败则插入本地link—— 这样能复用浏览器原生解析逻辑 - 注意
fetch不受 CSPstyle-src限制，但受connect-src约束；CDN 域名需在策略中放行
常见失效场景与对应检查点
CDN 没“挂”，但样式没生效，往往不是加载问题，而是降级逻辑被绕过或干扰。
立即学习“前端免费学习笔记（深入）”；
-
document.write或早期 inline script 可能阻塞link创建时机，导致 onload/onerror 绑定失败 - 构建工具（如 Webpack/Vite）若启用了 CSS 提取插件，生成的
link标签可能已被注入，手动降级脚本要确保执行时机晚于它 - 某些 CDN（如 jsDelivr）对未备案域名返回 403，但浏览器控制台只显示“Failed to load resource”，不会报具体状态码——需用 Network 面板确认响应状态
- 本地开发时，如果用
file://协议打开页面，fetch 会因跨域被拒，此时应跳过 CDN 尝试，直接加载本地路径
