前端 JS 加载失败处理方案与容灾策略

前端引入的 JS 加载失败页面功能无法使用？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( {
      = () => {
      attempt++;
       script = .();
      script. = url + (url.() ?  : ) +  + attempt;
      script. = ;
       timer = ( {
        script.();
         (attempt < maxRetry) {
          .();
          ();
        }  {
          ( ());
        }
      }, timeout);
      script. =  {
        (timer);
        ();
      };
      script. =  {
        (timer);
        script.();
         (attempt < maxRetry) {
          .();
          ();
        }  {
          ( ());
        }
      };
      ..(script);
    };
    ();
  });
}