前端 JS 加载失败导致功能不可用，重试与多源备份方案

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);
    };
    ();
  });
}