前端 JS 加载失败的处理方案与重试机制实现
1. 事故起因
今天在公司被客户反馈系统功能无法使用，通过排查发现是项目中的某一个 JS 一直加载失败导致。该公共 JS 工具类放在某一个 CDN 节点上（多项目共享引入），由于 CDN 节点故障，导致加载失败，从而影响页面功能。
JS 文件加载失败是前端开发常见问题之一，既然问题找到了那么就很好解决了，这里分享一下解决思路，教你轻松解决这个问题！
2. 为什么会出现 JS 加载失败？
为何会出现 JS 加载失败？
由于网络请求具有不确定性，特别是在移动端和弱网环境下，JS 文件加载可能因以下原因失败：
- 网络问题：用户的网络环境不稳定
- CDN 故障：CDN 节点挂了，资源就直接 404
- 缓存污染：某些浏览器或代理缓存了错误的文件
以上这些问题不可完全避免，但我们能在代码层面进一步完善尽量给用户进行兜底。
3. 解决思路
既然是加载失败，那么是否可以提供一种重试机制，当前端加载 JS 失败了进行重试，另外由于单节点的问题，我们还可以多源备份，避免单节点故障导致的问题！
- 自动重试：加载失败后，尝试再次发起请求
- 多源加载：比如主域名失败后，切换备用的 CDN 地址
4. 基础监听与重试方案
核心逻辑是：用 script 标签去加载资源，监听 onerror 事件，失败后重试，以下是加载重试的代码，小伙伴们可以根据自身的需求进行调整改动：
function loadScript(url, options = {}) {
const { maxRetry = 3, timeout = 5000 } = options;
let attempt = 0;
return new Promise(() => {
= () => {
attempt++;
script = .();
script. = url + (url.() ? : ) + + attempt;
script. = ;
timer = ( {
script.();
(attempt < maxRetry) {
.();
();
} {
( ());
}
}, timeout);
script. = {
(timer);
();
};
script. = {
(timer);
script.();
(attempt < maxRetry) {
.();
();
} {
( ());
}
};
..(script);
};
();
});
}
