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

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

在生产环境中，前端资源加载失败是常见且棘手的问题。当关键脚本无法载入时，页面功能往往随之瘫痪，直接影响用户体验。本文探讨如何通过代码层面的兜底机制，解决因网络波动、CDN 节点故障或缓存污染导致的加载异常。

问题背景与原因分析

在实际项目中，我们常遇到公共 JS 工具类因 CDN 节点故障而加载失败的情况。这通常由以下因素引起：

• 网络环境不稳定：移动端或弱网环境下请求易超时。
• CDN 节点故障：单一节点挂掉会导致资源直接返回 404。
• 缓存污染：浏览器或代理服务器缓存了错误的文件版本。

虽然这些问题难以完全避免，但通过合理的容错设计，我们可以最大程度降低对业务的影响。

核心解决思路

针对上述风险，建议采用双重保障策略：

1. 自动重试机制：监听加载错误事件，在失败后自动发起有限次数的重试。
2. 多源备份加载：维护多个 CDN 地址列表，当前端主源失败时，按顺序尝试备用源。

基础监听与重试实现

核心逻辑是利用 script 标签动态创建资源，并监听 onerror 和 onload 事件。结合超时控制，可以在一定时间内反复尝试加载。

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;

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

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

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

      ..(script);
    };

    ();
  });
}