javascript多域名静态资源容灾切换的核心是主域名加载失败时自动回退备用域名，通过onerror事件动态创建新标签实现，支持封装通用函数与预加载探测优化。
JavaScript 中实现多域名静态资源的容灾切换，核心思路是：当主域名资源加载失败时，自动尝试从备用域名加载。这常用于 CDN 资源（如 JS、CSS、图片）的高可用保障，不依赖后端，纯前端可完成。
监听资源加载失败并触发回退
对 <script></script>、<link>、<img> 等标签，利用 onerror 事件捕获加载失败，并动态创建新标签指向备用 URL。
- 脚本资源容灾示例：
<script src="https://cdn-a.example.com/lib.js" onerror="loadFallbackScript()"></script>
<script><br> function loadFallbackScript() {<br> const s = document.createElement('script');<br> s.src = 'https://cdn-b.example.com/lib.js';<br> s.onerror = () => console.error('所有 CDN 均加载失败');<br> document.head.appendChild(s);<br> }<br> </script>
封装通用容灾加载函数
避免重复写 onerror 逻辑，可封装为可复用函数，支持多级备用域名：
- 传入资源类型（'script' / 'style' / 'img'）、主 URL 和备用 URL 数组；
- 按顺序尝试加载，任一成功即停止；
- 全部失败时触发自定义回调（如上报监控或降级为本地资源）。
function loadWithFallback(type, urls, onError) {
const tryNext = (urlList) => {
if (urlList.length === 0) {
onError && onError();
return;
}
const url = urlList[0];
const el = type === 'script'
? Object.assign(document.createElement('script'), { src: url })
: type === 'style'
? Object.assign(document.createElement('link'), { rel: 'stylesheet', href: url })
: Object.assign(document.createElement('img'), { src: url });
el.onerror = () => tryNext(urlList.slice(1));
document.head.appendChild(el);
};
tryNext(urls);
}
// 使用：
loadWithFallback('script', [
'https://cdn1.example.com/app.js',
'https://cdn2.example.com/app.js',
'/local/app.js'
], () => console.warn('资源加载完全失败'));
预加载探测 + 智能路由（进阶）
若需更主动的容灾（如首屏前就确定最优 CDN），可在页面初始化阶段发起轻量探测请求（HEAD 或小图 GET），记录各域名响应时间与成功率，再决定后续资源加载路径：
- 用
fetch(url, { method: 'HEAD', cache: 'no-store' })探测可用性； - 结合 localStorage 缓存最近一次成功域名，减少重复探测；
- 注意跨域限制：探测 URL 需服务端配置
Access-Control-Allow-Origin，或使用<img>发起无 CORS 限制的 GET 探测（如/health.png）。
注意事项与边界场景
实际落地需关注以下细节：
- CORS 问题：动态插入的 script 默认无 CORS 限制，但 fetch 加载 JSON/字体等需服务端配合；
- 样式重复加载：CSS 回退需确保不会因多次插入导致样式冲突，建议加唯一 id 或检查是否已存在；
- 缓存一致性：不同 CDN 的资源版本需严格同步，否则可能因缓存差异导致 JS/CSS 不匹配；
- 监控告警：记录回退发生次数与域名分布，及时发现某 CDN 长期不可用。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
