link标签加载失败时浏览器不触发error事件，需通过document.styleSheets检测、preload+fallback双路径或服务端兜底（如Nginx try_files）实现容错。
link 标签加载失败时浏览器不会触发 error 事件
这是最常被误判的前提：很多人以为给 <link rel="stylesheet"> 加上 onerror 就能捕获加载失败，但实际上主流浏览器（Chrome、Firefox、Safari）**根本不支持该事件**。DOM 中的 link 元素没有可靠的原生错误回调机制。
所以不能依赖监听事件来“发现”失败，得换思路——要么提前预判，要么事后检测。
用 document.styleSheets 检测 CSS 是否实际生效
加载完成后，浏览器会把成功解析的样式表塞进 document.styleSheets，但失败的不会出现。不过要注意：即使 link 元素存在，若 HTTP 状态非 2xx（如 404、500）、MIME 类型错误（返回 text/html 而非 text/css），或内容为空/语法错误，它大概率不会进入这个集合。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
window.addEventListener('load', ...)或setTimeout(..., 0)后检查document.styleSheets长度是否符合预期 - 对关键样式表，可额外验证某条规则是否生效，比如读取
getComputedStyle(document.body).backgroundColor是否为预设值 - 避免在 DOMContentLoaded 时立刻查 —— 此时样式表可能还在下载中，尚未解析完成
preload + fallback 的双路径加载模式
真正可控的容错，是主动控制加载路径。用 <link rel="preload"> 提前拉取主样式，再用 JS 判断是否就绪，不成就切备用路径。
示例逻辑：
const primary = '/css/main.css';
const fallback = '/css/main.fallback.css';
<p>const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = primary;</p><p>link.onload = () => { /<em> 加载成功 </em>/ };
link.onerror = () => {
// 注意：这里在部分旧版 Safari 中可能不触发，所以需配合 document.styleSheets 验证
link.href = fallback;
};</p><p>document.head.appendChild(link);关键点：
-
link.onerror在 Chrome/Firefox 中对网络失败有效，但对 CSS 解析错误（如语法错）无效 - 切换
href后必须重新 append 或替换节点，仅改 href 不会触发二次加载 - 备用路径建议放在同域，避免跨域 CORS 阻断（
crossorigin属性无法解决样式表的跨域错误捕获）
HTTP 层兜底：服务器返回 200 + 默认样式
前端容错总有盲区，最稳的方式是在服务端做一层保障。当请求 /css/main.css 时，如果文件丢失或构建出错，Nginx / Express 不应直接返回 404，而应回退到一个最小可用的 CSS 文件。
例如 Nginx 配置片段：
location /css/main.css {
try_files $uri /css/main.default.css;
}这样连 DNS、CDN 缓存、路径拼写错误等前端完全不可控的问题，都能被覆盖。而且不需要改任何 JS 逻辑，兼容性零成本。
容易忽略的是：这个 default.css 必须足够轻量且语义清晰，比如只重置 margin/padding、定义基础字体和颜色，否则 fallback 反而拖慢首屏。
