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((resolve, reject) => {
= () => {
attempt++;
script = .();
script. = url + (url.() ? : ) + + attempt;
script. = ;
timer = ( {
script.();
(attempt < maxRetry) {
.();
();
} {
( ());
}
}, timeout);
script. = {
(timer);
();
};
script. = {
(timer);
script.();
(attempt < maxRetry) {
.();
();
} {
( ());
}
};
..(script);
};
();
});
}


