前端 JS 资源加载失败怎么办？重试与多源容灾方案实战
场景回顾：一次 CDN 故障引发的线上事故
今天接到客户反馈，系统部分功能不可用。排查发现是某个公共 JS 工具类加载失败。该资源托管在单一 CDN 节点上，由于节点故障，导致多项目共享的脚本无法加载，进而影响页面功能。
JS 文件加载失败是前端开发常见问题之一，特别是在弱网或 CDN 不稳定时。既然问题定位清晰，我们来看看如何从代码层面构建防御机制。
为什么会出现 JS 加载失败？
网络请求具有不确定性，常见原因包括：
- 网络波动：用户环境不稳定，丢包或延迟高。
- CDN 故障：特定节点宕机，返回 404 或连接超时。
- 缓存污染：浏览器或代理缓存了错误的旧版本文件。
这些问题难以完全避免，但可以通过技术手段进行兜底。
解决思路
核心在于两点：一是加载失败后的自动重试，二是多源备份以防单点故障。
- 自动重试：捕获错误后，按策略再次发起请求。
- 多源加载：主地址失效时，自动切换备用 CDN 地址。
基础监听与重试方案
我们可以封装一个加载函数，利用 script 标签配合 onerror 事件监听。失败后根据重试次数决定是否继续尝试。
function loadScript(url, options = {}) {
const { maxRetry = 3, timeout = 5000 } = options;
let attempt = 0;
return new Promise((resolve, reject) => {
const load = () => {
attempt++;
const script = document.();
script. = url + (url.() ? : ) + + attempt;
script. = ;
timer = ( {
script.();
(attempt < maxRetry) {
.();
();
} {
( ());
}
}, timeout);
script. = {
(timer);
();
};
script. = {
(timer);
script.();
(attempt < maxRetry) {
.();
();
} {
( ());
}
};
..(script);
};
();
});
}
