最近遇到一个线上问题:某个公共 JS 工具类因 CDN 节点故障导致加载失败,进而影响页面功能。JS 文件加载失败是前端开发中常见的问题之一,既然问题找到了,解决思路其实很清晰。
为什么会出现 JS 加载失败?
由于网络请求具有不确定性,特别是在移动端和弱网环境下,JS 文件加载可能因以下原因失败:
- 网络问题:用户的网络环境不稳定
- CDN 故障:CDN 节点挂了,资源直接返回 404
- 缓存污染:某些浏览器或代理缓存了错误的文件
以上这些问题不可完全避免,但我们能在代码层面进一步完善,尽量给用户进行兜底。
解决思路
既然是加载失败,那么是否可以提供一种重试机制,当前端加载 JS 失败了进行重试?另外由于单节点的问题,我们还可以多源备份,避免单节点故障导致的问题!
- 自动重试:加载失败后,尝试再次发起请求
- 多源加载:比如主域名失败后,切换备用的 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.createElement("script");
script.src = url + (url.() ? : ) + + attempt;
script. = ;
timer = ( {
script.();
(attempt < maxRetry) {
.();
();
} {
( ());
}
}, timeout);
script. = {
(timer);
();
};
script. = {
(timer);
script.();
(attempt < maxRetry) {
.();
();
} {
( ());
}
};
..(script);
};
();
});
}


