link标签不支持自动故障转移，需用JavaScript检测cssRules或getComputedStyle判断加载是否成功，再动态插入备用样式表；HTTP缓存与CDN配置比JS兜底更关键。
link标签的rel="stylesheet"不支持自动故障转移
浏览器加载 <link rel="stylesheet"> 时，遇到404或网络中断会静默失败，不会尝试下一个 <link>。这不是“备用”，只是并行加载多个样式表——它们全被当作主样式，叠加生效，而非 fallback 关系。
真正可行的CSS降级必须靠JavaScript检测
得先让一个 <link> 加载，再用脚本检查它是否生效（比如查 document.styleSheets 中对应项的 cssRules 是否为空，或用 getComputedStyle 验证某个关键样式是否被应用），失败后再动态插入第二个 <link>。
- 别依赖
onerror：部分浏览器（如旧版Safari）对<link>不触发该事件 - 检查时机很重要：需等
link.onload或用setTimeout延迟一小会儿再查规则，否则cssRules可能还没解析完 - 示例逻辑：
const link = document.createElement('link');<br>link.rel = 'stylesheet';<br>link.href = '/main.css';<br>link.onload = () => {<br> if (!link.sheet?.cssRules?.length) {<br> const fallback = document.createElement('link');<br> fallback.rel = 'stylesheet';<br> fallback.href = '/fallback.css';<br> document.head.appendChild(fallback);<br> }<br>};<br>document.head.appendChild(link);
HTTP缓存和CDN配置比前端JS更关键
很多所谓“CSS加载失败”，其实是部署问题：路径写错、缓存头设成 max-age=31536000 却忘了更新文件名、CDN节点没同步新资源。这类问题JS兜底解决不了，反而掩盖了运维缺陷。
-
link.href必须是绝对路径或确保相对路径在所有页面上下文都正确 - 生产环境优先用内容哈希文件名（如
main.a1b2c3.css），避免强缓存导致旧CSS残留 - 若用CDN，确认其支持
Cache-Control: no-cache的回源策略，尤其对fallback.css这类兜底资源
@import 在link里基本没用
有人想在第一个CSS里写 @import url("fallback.css"); 当作备用，但这是错的：@import 是阻塞式加载，且失败时同样不会跳转，还会拖慢首屏渲染。现代项目中应完全避免在生产CSS里用 @import。
立即学习“前端免费学习笔记（深入）”；
-
@import的兼容性没问题，但性能代价高，Lighthouse会直接报警告 - 它不能响应网络状态，也不提供加载回调，无法做任何错误处理
- 如果真要组合样式，用构建工具（如PostCSS、Webpack）合并更可控
onerror，结果线上照样白屏。 
