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