前端 JS 加载失败处理方案：重试与多源备份策略
生产环境中，公共 JS 资源加载失败往往导致页面功能不可用。当 CDN 节点故障或网络波动时，单点依赖极易引发连锁反应。本文将分享一套经过实战验证的容灾方案，通过自动重试与多源切换机制，提升前端资源的加载可靠性。
问题背景
在一次线上排查中，发现某公共工具类 JS 因 CDN 节点故障导致加载失败，进而影响整个页面的核心功能。这类问题在移动端和弱网环境下尤为常见，单纯依赖单一资源源存在较大风险。
为什么会出现 JS 加载失败？
网络请求具有不确定性，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.createElement("script");
// 添加重试参数以便调试
script.src = url + (url.includes("?") ? "&" : "?") + "retry=" + attempt;
script.async = true;
let timer = setTimeout(() => {
script.remove();
if (attempt < maxRetry) {
console.warn(`加载超时，正在重试 ${attempt}/${maxRetry} ...`);
load();
} else {
reject(new Error(`加载超时：${url}`));
}
}, timeout);
script.onload = () => {
clearTimeout(timer);
resolve();
};
script.onerror = () => {
clearTimeout(timer);
script.remove();
if (attempt < maxRetry) {
console.warn(`加载失败，正在重试 ${attempt}/${maxRetry} ...`);
load();
} else {
reject(new Error(`加载失败：${url}`));
}
};
document.head.appendChild(script);
};
load();
});
}
使用方式
loadScript("https://cdn.yourname.com/app.js", {
maxRetry: 3,
timeout: 3000
}).then(() => {
console.log("脚本加载成功");
}).catch((err) => {
console.error("脚本加载最终失败：", err);
// 加载重试依旧失败可以提示用户刷新
// alert('资源加载失败，请重新刷新页面');
});
多源备份加载
针对单节点故障风险，我们可以维护一个 CDN 地址列表，依次尝试加载直到成功。
const cdnList = [
"https://cdn1.yourname.com/app.js",
"https://cdn2.yourname.com/app.js",
"https://cdn3.yourname.com/app.js"
];
(async () => {
for (const url of cdnList) {
try {
await loadScript(url);
console.log("成功加载：", url);
break;
} catch (e) {
console.warn("当前源失败，尝试下一个：", url);
}
}
})();
这样即使某个 CDN 节点彻底挂掉，也能通过备用源恢复服务。
总结
通过引入重试机制和多源备份策略，可以有效应对 JS 加载失败带来的业务中断风险。关键点在于：
- 合理设置重试次数：通常 2-3 次足够，过多会拖慢用户体验
- 准备冗余资源源：主备 CDN 地址需保持内容一致
- 友好降级提示：关键资源多次加载失败时，应引导用户刷新页面
这套方案能显著提升应用的健壮性，确保在网络波动或资源源故障时，用户依然能获得可用的服务体验。
