前端 JS 加载失败处理方案：重试与多源备份策略
1. 事故起因
最近遇到一个线上问题，客户反馈系统部分功能无法使用。排查后发现是项目中引用的某个公共 JS 工具类加载失败导致的。该资源部署在 CDN 节点上（多项目共享），由于 CDN 节点故障，导致页面脚本加载中断，进而影响业务功能。
JS 文件加载失败在前端开发中并不罕见。既然定位到了原因，解决思路也就清晰了。这里分享一套经过实战验证的处理方案，帮助大家在面对网络波动或资源不可用时提供兜底能力。
2. 为什么会出现 JS 加载失败？
网络请求本身具有不确定性，特别是在移动端或弱网环境下，JS 文件加载可能因以下原因失败：
- 网络问题：用户网络环境不稳定，丢包或延迟过高。
- CDN 故障：CDN 节点异常，资源直接返回 404 或超时。
- 缓存污染：浏览器或代理服务器缓存了错误的文件版本。
以上问题很难完全避免，但我们可以从代码层面构建容错机制，尽量给用户提供更友好的体验。
3. 解决思路
核心思路很简单：当 JS 加载失败时，不要直接放弃，而是尝试重试；同时，为了避免单点故障，可以准备多个备用地址进行轮询加载。
- 自动重试：监听
onerror事件，失败后按策略再次发起请求。 - 多源加载：主域名失败后，自动切换至备用的 CDN 地址。
4. 基础监听与重试方案
实现的核心逻辑是利用 script 标签动态加载资源，并监听其加载状态。如果失败，则根据预设的重试次数继续尝试。
下面是一个通用的加载函数，支持超时控制和最大重试次数限制：
function loadScript(url, options = {}) {
const { maxRetry = 3, timeout = 5000 } = options;
let attempt = 0;
return new Promise((resolve, reject) => {
const load = () => {
attempt++;
script = .();
script. = url + (url.() ? : ) + + attempt;
script. = ;
timer = ( {
script.();
(attempt < maxRetry) {
.();
();
} {
( ());
}
}, timeout);
script. = {
(timer);
();
};
script. = {
(timer);
script.();
(attempt < maxRetry) {
.();
();
} {
( ());
}
};
..(script);
};
();
});
}
