CDN加载失败时页面会彻底无样式，必须用onerror动态插入本地CSS实现真正fallback；多个<link>并列写法不构成故障转移，因浏览器将其视为并行主样式表而非备用选项。
CDN 加载失败时，页面会直接丢失样式，变成裸 HTML——这不是“加载慢”，而是“彻底没样式”。必须用 onerror 回退到本地文件，且不能只靠标签顺序或多个 <link> 并列写法。
为什么多个 <link> 标签并列写不构成 fallback
浏览器把所有 <link rel="stylesheet"> 当作并行主样式表，不是“第一个失败就用第二个”。404 或 MIME 错误发生时，它静默跳过，不会尝试下一个。你看到的“备用生效”，往往只是两个 CSS 同时加载、后者覆盖了前者，而非故障转移。
- 检查 DevTools → Network，看是否两个 CSS 都发出了请求（状态码 200）
- 若第一个返回 404 但页面仍有样式，说明是第二个 CSS 在起作用，不是 fallback 逻辑
- 这种写法在 Safari 旧版本中甚至不触发
onerror，更不可靠
正确回退：用 onerror 动态插入本地 CSS
核心是监听 CDN <link> 的加载失败，并在失败后创建新 <link> 插入 <head>。关键点不在“有没有 JS”，而在“插入时机”和“路径有效性”。
- 给 CDN
<link>加id，例如：<link id="bootstrap-cdn" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-..." crossorigin="anonymous"> -
onerror回调里必须用document.createElement('link')新建节点，不能复用原节点 - 本地路径必须是服务器可访问的绝对路径，如
/css/bootstrap.min.css，禁用./css/或../css/（SPA 路由下极易 404） - JS 必须放在
<body>底部或用defer，确保 DOM 已就绪
<script>
document.getElementById('bootstrap-cdn').onerror = () => {
const fallback = document.createElement('link');
fallback.rel = 'stylesheet';
fallback.href = '/css/bootstrap.min.css';
document.head.appendChild(fallback);
};
</script>
integrity 和 crossorigin 不是可选项
没 integrity 的 CDN 引入等于裸奔：CDN 被中间人劫持、镜像源被篡改、甚至 jsDelivr 某个 tag 被恶意重推，你都毫无感知。浏览器只校验哈希，不校验来源。
立即学习“前端免费学习笔记（深入）”；
-
integrity值必须和 CDN 返回内容完全一致，可用curl -s URL | sha384sum -b验证 -
crossorigin="anonymous"是启用integrity的前提，否则浏览器忽略校验 - 缺失
crossorigin时，Chrome 控制台会报错：Failed to find a valid digest in the 'integrity' attribute - 不要手写哈希——从 CDN 提供商官网或 npm 包的
dist/目录附带的SRI.txt获取
本地 CSS 文件部署的三个硬性要求
回退机制能跑通，前提是本地文件真能被浏览器拿到。很多“回退失效”问题，根源在部署侧。
- 文件必须放在 Web 服务器根路径可访问位置，例如 Nginx 的
root /var/www/html;下的/css/bootstrap.min.css - HTTP 响应头需包含
Content-Type: text/css，否则浏览器拒绝解析（Nginx 默认对.css已配置，但自定义 location 块可能覆盖） - 禁止强缓存未带哈希的文件：若用
max-age=31536000，更新 CSS 后用户永远看不到新样式；应配合文件名哈希（如bootstrap.a1b2c3.css）或设置no-cache用于兜底资源
最常被忽略的是：CDN 失败时，本地 CSS 的加载也依赖网络和服务器状态。如果 CDN 和源站同时出问题（比如整个机房断网），回退方案本身也会失效——这时真正该做的是监控告警与源站容灾，而不是在前端堆更多 JS 逻辑。
