前端 JS 加载失败处理方案：重试与多源备份策略

前端 JS 加载失败处理方案：重试与多源备份策略

生产环境中，公共 JS 资源加载失败往往导致页面功能不可用。当 CDN 节点故障或网络波动时，单点依赖极易引发连锁反应。本文将分享一套经过实战验证的容灾方案，通过自动重试与多源切换机制，提升前端资源的加载可靠性。

问题背景

在一次线上排查中，发现某公共工具类 JS 因 CDN 节点故障导致加载失败，进而影响整个页面的核心功能。这类问题在移动端和弱网环境下尤为常见，单纯依赖单一资源源存在较大风险。

为什么会出现 JS 加载失败？

网络请求具有不确定性，JS 文件加载失败通常由以下原因导致：

• 网络环境不稳定：用户侧网络波动或丢包
• CDN 节点故障：特定区域节点异常返回 404 或超时
• 缓存污染：浏览器或代理服务器缓存了错误的文件版本

虽然无法完全避免上述情况，但我们可以从代码层面构建兜底机制。

解决思路

核心策略包含两点：

1. 自动重试：加载失败后，按策略再次发起请求
2. 多源加载：准备多个 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("?") ?  : ) +  + attempt;
      script. = ;

       timer = ( {
        script.();
         (attempt < maxRetry) {
          .();
          ();
        }  {
          ( ());
        }
      }, timeout);

      script. =  {
        (timer);
        ();
      };

      script. =  {
        (timer);
        script.();
         (attempt < maxRetry) {
          .();
          ();
        }  {
          ( ());
        }
      };

      ..(script);
    };
    ();
  });
}