link标签的onerror对stylesheet无效，仅preload+as="style"支持onerror；需先preload监听成败，再通过JS启用disabled样式表或插入内联fallback样式。
link 标签本身不触发 onerror 事件——这是最常踩的坑。Chrome、Firefox、Safari 全部忽略 link[rel="stylesheet"] 的 onerror，写了等于没写。真正能监听失败的，是 link[rel="preload"][as="style"]。
用 preload + onerror 控制主 CSS 加载流程
必须拆成两步：先预加载资源并监听成败，再决定是否启用主样式表。
- 在
<head>中放一个禁用状态的主样式表：<link id="main-css" rel="stylesheet" disabled href=""> - 紧跟着放一个预加载标签：
<link rel="preload" as="style" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" onload="enableMainCSS()" onerror="loadFallbackCSS()"> - 在
<body>底部加内联脚本：function enableMainCSS() { document.getElementById('main-css').disabled = false; } function loadFallbackCSS() { const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = '/css/bootstrap.min.css'; // 必须是服务器可访问的绝对路径 document.head.appendChild(link); }
fallback CSS 必须内联或确保首次加载 100% 可达
如果 fallback 也走网络请求（比如 ./css/base.css），而此时用户正处在弱网、拦截或路由重写环境中，二次请求照样失败，页面依然白屏。
- 最稳妥做法：把降级用的最小化基础样式（重置、字体、容器、按钮等）直接写进
<style id="fallback-style">，控制在 2KB 以内 - 若必须外链 fallback，路径不能用
./或../，要写成根相对路径（如/css/base.css）或完整 URL，避免 SPA 路由下 404 - 不要依赖构建工具自动注入 fallback —— 它可能比你的降级脚本更早执行，导致两个 CSS 同时生效、规则冲突
CDN 链接本身失效的快速排查点
很多“失败”根本不是代码问题，而是链接压根不可用。别跳过这步验证。
立即学习“前端免费学习笔记（深入）”；
- 把
href值粘到浏览器地址栏直接访问，看返回内容是不是纯 CSS 文本，Content-Type是不是text/css - 检查 Network 面板中该请求的 Status：0（跨域/协议拦截）、404（路径错）、403（CDN 拒绝未备案域名）、302（重定向到 HTML 错误页 → MIME 报
text/plain） - 国内环境优先试
https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css，比 jsDelivr/unpkg 更稳定 - Tailwind 不提供传统 CDN CSS 文件，
https://cdn.tailwindcss.com是 JS 脚本，不能当href值用
真正容易被忽略的是：降级逻辑必须在主 CSS 尚未渲染前就完成。一旦浏览器开始解析和绘制无样式的 DOM，后续插入样式仍可能引发 FOUC 或部分元素样式丢失。所以 preload 和 fallback 脚本的位置、执行时机、以及 fallback 内容的完备性，三者缺一不可。
