前端引入的JS加载失败页面功能无法使用？JS加载失败的终极解决方案

🌷 古之立大事者，不惟有超世之才，亦必有坚忍不拔之志
🎐 个人CSND主页——Micro麦可乐的博客
🐥《Docker实操教程》专栏以最新的Centos版本为基础进行Docker实操教程，入门到实战
🌺《RabbitMQ》专栏19年编写主要介绍使用JAVA开发RabbitMQ的系列教程，从基础知识到项目实战
🌸《设计模式》专栏以实际的生活场景为案例进行讲解，让大家对设计模式有一个更清晰的理解
🌛《开源项目》本专栏主要介绍目前热门的开源项目，带大家快速了解并轻松上手使用
🍎 《前端技术》专栏以实战为主介绍日常开发中前端应用的一些功能以及技巧，均附有完整的代码示例
✨《开发技巧》本专栏包含了各种系统的设计原理以及注意事项，并分享一些日常开发的功能小技巧
💕《Jenkins实战》专栏主要介绍Jenkins+Docker的实战教程，让你快速掌握项目CI/CD，是2024年最新的实战教程
🌞《Spring Boot》专栏主要介绍我们日常工作项目中经常应用到的功能以及技巧，代码样例完整
👍《Spring Security》专栏中我们将逐步深入Spring Security的各个技术细节，带你从入门到精通，全面掌握这一安全技术
如果文章能够给大家带来一定的帮助！欢迎关注、评论互动～

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) => {
    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('资源加载失败，请重新刷新页面')
});

5. 多源备份加载

上面我们提到了，由于我们是单节点一旦节点故障就会出现加载失败的问题，既然如此我们还可以准备多个地址：

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 节点彻底挂了，也能通过备用源恢复

6. 总结

通过本文的介绍，相信小伙伴已经掌握了JS加载失败的重试方案，总结一下无非就是解决以下几个问题：

加载失败的重试：失败重试，次数通常2 - 3次足够，过多重试会影响用户体验
CDN容灾：准备多个CDN地址，主地址失败时自动切换
提供降级方案：关键资源重试加载依然失败时显示友好提示（比如演示代码中弹出警告框告知刷新）

通过JS加载重试机制可以提升我们应用的可靠性，即便因为各种原因出现加载失败的问题，都尽可能给用户进行兜底。如果你也和博主一样有类似的问题，不如花一点时间实现重试逻辑，让你的应用更加健壮可靠！

如果你在实践过程中有任何疑问或更好的扩展思路，欢迎在评论区留言，最后希望大家 一键三连 给博主一点点鼓励！