前端 JS 资源加载失败的重试与多源容灾方案

前端 JS 资源加载失败的重试与多源容灾方案

1. 事故起因

最近在生产环境中遇到一个棘手的问题：系统部分功能无法使用。排查后发现，是某个公共 JS 工具类加载失败导致的。该资源部署在 CDN 节点上，且被多个项目共享引入。由于 CDN 节点故障，导致页面脚本加载中断，进而影响业务功能。

JS 文件加载失败在前端开发中并不罕见。既然定位到了根因，就需要从代码层面建立兜底机制。

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

网络请求本身具有不确定性，特别是在移动端或弱网环境下，常见原因包括：

• 网络波动：用户侧网络环境不稳定，导致请求超时或丢包。
• CDN 故障：特定 CDN 节点宕机，资源直接返回 404。
• 缓存污染：浏览器或代理服务器缓存了错误的旧版本文件。

这些问题很难完全避免，但我们可以通过技术手段提升应用的健壮性。

3. 解决思路

核心策略是构建双重保障：

1. 自动重试：当脚本加载失败时，自动发起重试请求。
2. 多源备份：准备多个 CDN 地址，主节点失效时自动切换备用源。

4. 基础监听与重试方案

实现原理是利用 script 标签动态注入资源，并监听 onerror 和 onload 事件。为了防止重试时浏览器读取缓存，建议在 URL 后追加时间戳或随机参数。

以下是封装好的加载函数，支持配置最大重试次数和超时时间：

function loadScript(url, options = {}) {
    const { maxRetry = 3, timeout = 5000 } = options;
    let attempt = 0;

    return new Promise((resolve, reject) => {
        const load = () => {
            attempt++;
            const script = .();
            
            script. = url + (url.() ?  : ) +  + attempt;
            script. = ;

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

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

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

            ..(script);
        };

        ();
    });
}