onerror在<link rel="stylesheet">上完全无效，因规范不支持；必须用<link rel="preload" as="style">配合JS监听load/error事件实现fallback。
CDN引入CSS失败时，onerror事件根本不会触发——浏览器对<link rel="stylesheet">压根不派发错误事件，写了也白搭。必须用<link rel="preload" as="style">配合JS控制加载流程，再 fallback 到内联或本地 CSS。
为什么onerror在<link>上完全无效
Chrome、Firefox、Safari 全部忽略<link rel="stylesheet" onerror="console.log('fail')">。这不是兼容性问题，是规范层面就不支持。所谓“监听失败”纯属误解。真正能捕获加载结果的只有<link rel="preload" as="style">，它会触发load和error事件。
正确 fallback 的三步操作
核心逻辑：预加载 → 监听结果 → 动态启用主样式或插入备用样式。
- 先写一个
<link rel="preload" as="style" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"> - 再放一个禁用状态的主
<link id="main-css" rel="stylesheet" disabled>（注意disabled属性） - 最后加 JS：
document.querySelector('link[rel="preload"][as="style"]').addEventListener('load', () => { document.getElementById('main-css').disabled = false; }); document.querySelector('link[rel="preload"][as="style"]').addEventListener('error', () => { const fallback = document.createElement('link'); fallback.rel = 'stylesheet'; fallback.href = '/css/bootstrap.min.css'; document.head.appendChild(fallback); });
fallback CSS 必须内联或确保路径绝对可靠
如果 fallback 是远程路径（如./css/bootstrap.min.css），在 SPA 路由下极易 404；若用相对路径，HTML 在子目录打开时也会失效。最稳做法是把 fallback CSS 内联进<style id="fallback-style">，但体积不能超 2KB（否则影响首屏）。否则就用绝对路径：/css/bootstrap.min.css，而非./css/或css/。
立即学习“前端免费学习笔记（深入）”；
本地开发时 file:// 协议直接废掉所有 CDN
双击打开 HTML 文件时，浏览器会拒绝加载任何外部 CSS，Network 面板显示net::ERR_FILE_NOT_FOUND或blocked。这不是 CDN 错，是协议限制。必须起本地服务：npx serve、python3 -m http.server 或 VS Code Live Server 插件——否则一切 fallback 逻辑都无从验证。
最容易被忽略的是 preload 和主 link 的配对关系：preload 的href必须和主 link 的href完全一致，否则 load 事件不会关联到对应 link；另外，disabled属性不能靠 JS 延迟设置，必须初始 HTML 就带上，否则可能闪出未样式化内容（FOUC）。
