CSS加载静默失败，无法通过link.onerror监听，应采用preload+onerror方案实现CDN容灾与本地fallback；fallback.css须精简、无外部依赖，优先内联。
link标签加载失败时浏览器不报错，但样式确实没生效
这是最让人困惑的一点：HTML里写了个 <link rel="stylesheet" href="https://cdn.example.com/main.css">，网络断了、CDN挂了、路径写错了——页面照样渲染，控制台可能连个警告都没有，只是字体、间距、颜色全乱了。因为CSS加载是“静默失败”的，不像JS那样会中断执行或抛错。
所以不能靠监听错误事件来兜底（link.onerror 在多数浏览器中对CSS无效），得换思路。
- 别指望用JS监听
link元素的error事件做回退——Chrome/Firefox/Safari 均不触发 - 实际能检测的只有“样式是否被应用”，比如检查某个关键CSS变量是否存在、或某个元素的
computedStyle是否符合预期 - 更稳妥的做法是预设一个“已加载”标记（如设置
document.documentElement.dataset.cssLoaded = "1"），在CSS就绪后由它自己触发（需配合@import或内联脚本）
用preload + onerror配合内联备用样式
利用 <link rel="preload"> 的 onerror 是目前兼容性最好、行为最可控的方式。它本质是资源预加载，支持绑定原生 error 事件。
注意：必须用 as="style"，且后续要用 <link rel="stylesheet"> 正式引入，否则样式不会生效。
立即学习“前端免费学习笔记（深入）”；
- 先
<link rel="preload" as="style" href="https://cdn.a/css.css" onload="this.onload=null;document.getElementById('main-css').disabled=false" onerror="loadFallback()"> - 再放一个禁用状态的正式
link：<link id="main-css" rel="stylesheet" href="https://cdn.a/css.css" disabled> -
loadFallback()里可切换到本地文件或另一个CDN，例如：document.getElementById('main-css').href = '/css/fallback.css'; document.getElementById('main-css').disabled = false;
这个方案在 Chrome 73+、Firefox 69+、Safari 12.1+ 都可用，IE 不支持 preload，需单独降级处理。
多个CDN之间自动切换的简单实现
真要上多CDN容灾，别搞复杂轮询或定时检测，浪费请求又难调试。用“逐个尝试 + 缓存结果”最实用。
- 准备一个CDN列表，比如：
['https://cdn1.example.com', 'https://cdn2.example.com', 'https://cdn3.example.com'] - 用
localStorage记录上次成功的CDN索引（如localStorage.setItem('cssCdnIndex', '1')），下次优先试这个 - 加载失败时递增索引，超出范围就从头开始；成功后重置计数并更新存储
- 注意避免跨域问题：所有CDN必须同源或配好
Access-Control-Allow-Origin，否则fetch()检测会失败
不推荐用 fetch() 预检CSS——HTTP头、缓存策略、CORS都容易踩坑；直接用 preload + onerror 更贴近真实加载路径。
本地fallback.css必须精简且无外部依赖
当所有CDN都不可用时，最后这层本地CSS就是救命稻草。但它很容易写成“另一个完整样式表”，导致体积大、加载慢、甚至自己也出问题。
- 只保留核心排版规则：字体栈、行高、基础间距（
margin/padding）、链接颜色、表单控件尺寸 - 绝对不要
@import其他文件，也不要引用外部字体或图片（用系统字体、纯色背景） - 把 fallback.css 内联进HTML的
<style>中（小于1KB时），彻底规避额外请求和404风险 - 如果必须外链，路径写绝对根路径：
/css/fallback.css，避免相对路径在SPA路由下失效
很多人以为“有备用就行”，其实 fallback.css 一旦包含 WebFont 或 CSS变量，而这些又依赖网络，那整个回退就形同虚设。
