link标签不支持onerror事件，因html规范未定义其error语义，且chrome/firefox/safari均静默忽略；应改用preload+onerror探测，配合disabled主link与内联fallback实现容灾。
CDN 引入 CSS 失效时，link 标签本身无法触发 onerror，直接写 onerror 属性或用 addEventListener('error', ...) 都不会执行——这不是你代码写错了，是浏览器根本不支持。
为什么 link[rel="stylesheet"] 的 onerror 完全不生效
浏览器对 CSS 加载失败采取静默策略：不抛异常、不触发 error 事件、控制台可能零提示。HTML 规范未定义该元素的 error 事件语义，Chrome/Firefox/Safari 全部跳过监听。你写的 <link rel="stylesheet" href="x.css" onerror="alert(1)"> 永远不会弹窗。
- 错误现象：
net::ERR_ABORTED、net::ERR_CONNECTION_TIMED_OUT或 Network 面板中 CSS 请求状态为 pending/0 KB，但页面照常渲染，无任何 JS 错误上报 - 根本原因：CSS 加载走的是资源加载管线，不是 JS 执行上下文，不参与错误传播机制
- 验证方式：在 DevTools Console 中手动执行
document.querySelector('link[rel="stylesheet"]').addEventListener('error', console.log)，然后禁用网络再刷新——回调不会被调用
用 preload + onload/onerror 实现真实探测
只有 <link rel="preload" as="style"> 支持可靠的 onload 和 onerror 回调，这是目前兼容性最好（Chrome 50+/Firefox 46+/Safari 11.1+）、无需构建工具介入的方案。
-
as="style"是强制要求，缺了它浏览器不识别为样式资源，onload/onerror不会触发 - 主
<link rel="stylesheet">必须初始设为disabled，等 preload 确认成功后再启用 - fallback 逻辑应在
onerror中执行：切换href到本地路径并启用，或插入内联样式
<link rel="preload" as="style" href="https://cdn.example.com/main.css" onload="document.getElementById('main-css').disabled = false" onerror="loadLocalCSS()"><link id="main-css" rel="stylesheet" href="https://cdn.example.com/main.css" disabled><script>
function loadLocalCSS() {
const link = document.getElementById('main-css');
link.href = '/css/main.css'; // 本地备份路径
link.disabled = false;
}
</script>
fallback.css 必须满足的三个硬性条件
回退样式不是随便放个本地文件就行，它得在首次渲染前就可用，并能承接降级后的全部样式需求。
- 必须是完整功能子集：覆盖布局、字体、颜色、组件基础样式；不能只补几个 class
- 必须内联或早于所有依赖它的 HTML 渲染：如果放在
底部，首屏可能闪白或错乱 - 不能依赖外部资源：比如 fallback.css 里又
@import了另一个 CDN 地址，等于没 fallback
更稳妥的做法是把最关键的基础样式（重置、排版、按钮、表单）直接写成 <style></style> 内联块，放在 最顶部，确保哪怕所有外部 CSS 都失败，页面仍可读、可操作。
国内部署时特别注意 CDN 是否被墙
像 cdnjs.cloudflare.com、maxcdn.bootstrapcdn.com 这类国际 CDN 在国内常因 DNS 污染或 SNI 阻断导致连接超时，但浏览器只显示 net::ERR_NAME_NOT_RESOLVED 或干脆静默失败。
- 诊断方法：在服务器上执行
curl -I https://xxx.css，看是否 timeout；再换国内镜像如https://npm.elemecdn.com/测试连通性 - 应急建议：优先选用 jsDelivr（支持自动多源 fallback）、BootCDN（国内节点稳定），或直接切到本地部署
- 不要依赖单一 fallback 路径：例如只备一份
/css/main.css，万一该路径也因 Nginx 配置错误返回 404，整个降级链就断了
真正难处理的不是“怎么切”，而是“什么时候切”——preload 的 onerror 触发时机受网络抖动影响，有时会误判；而内联基础样式又容易和后续加载的正式 CSS 产生优先级冲突。这些边界情况，得靠真实弱网环境反复测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
