前端 JS 加载失败怎么办？重试与多源备份方案

最近遇到一个线上问题：某个公共 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);
    };
    ();
  });
}