快捷導(dǎo)航

前端引入的JS加載失敗原因分析與解決方案

更新時(shí)間：2025年09月13日 09:28:30 作者：Micro麥可樂

這篇文章主要為大家詳細(xì)介紹了前端引入的JS出現(xiàn)加載失敗的原因分析與解決方案,文中的示例代碼講解詳細(xì),需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下

1. 事故起因

今天在公司被客戶反饋系統(tǒng)功能無法使用，通過排查發(fā)現(xiàn)發(fā)現(xiàn)是項(xiàng)目中的某一個(gè)JS一直加載失敗導(dǎo)致，該公共JS工具類放在某一個(gè)CDN節(jié)點(diǎn)上（多項(xiàng)目共享引入），由于CDN節(jié)點(diǎn)故障，導(dǎo)致加載失敗，從而影響頁面功能！

JS文件加載失敗是前端開發(fā)常見問題之一，既然問題找到了那么就很好解決了，這里分享一下博主的解決思路，教你輕松解決這個(gè)問題！

2. 為什么會(huì)出現(xiàn) JS 加載失敗

有小伙伴要問了了？為什么會(huì)出現(xiàn) JS 加載失?。?/p>

由于網(wǎng)絡(luò)請(qǐng)求具有不確定性，特別是在移動(dòng)端和弱網(wǎng)環(huán)境下，JS文件加載可能因以下原因失?。?/p>

網(wǎng)絡(luò)問題：用戶的網(wǎng)絡(luò)環(huán)境不穩(wěn)定
CDN 故障：CDN節(jié)點(diǎn)掛了，資源就直接 404
緩存污染：某些瀏覽器或代理緩存了錯(cuò)誤的文件

以上這些問題不可完全避免，但我們能在代碼層面進(jìn)一步完善盡量給用戶進(jìn)行兜底。

3. 解決思路

既然是加載失敗，那么是否可以提供一種重試機(jī)制，當(dāng)前端加載JS失敗了進(jìn)行重試，另外由于單節(jié)點(diǎn)的問題，我們還可以多源備份，避免單節(jié)點(diǎn)故障導(dǎo)致的問題！

自動(dòng)重試：加載失敗后，嘗試再次發(fā)起請(qǐng)求

多源加載：比如主域名失敗后，切換備用的 CDN 地址

4. 基礎(chǔ)監(jiān)聽與重試方案

核心邏輯是：用 script 標(biāo)簽去加載資源，監(jiān)聽 onerror 事件，失敗后重試，以下是加載重試的代碼，小伙伴們可以根據(jù)自身的需求進(jìn)行調(diào)整改動(dòng)：

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;

      let timer = setTimeout(() => {
        script.remove();
        if (attempt < maxRetry) {
          console.warn(`加載超時(shí)，正在重試 ${attempt}/${maxRetry} ...`);
          load();
        } else {
          reject(new Error(`加載超時(shí)：${url}`));
        }
      }, timeout);

      script.onload = () => {
        clearTimeout(timer);
        resolve();
      };

      script.onerror = () => {
        clearTimeout(timer);
        script.remove();
        if (attempt < maxRetry) {
          console.warn(`加載失敗，正在重試 ${attempt}/${maxRetry} ...`);
          load();
        } else {
          reject(new Error(`加載失敗：${url}`));
        }
      };
      document.head.appendChild(script);
    };
    load();
  });
}

使用方式

loadScript("https://cdn.yourname.com/app.js", {
  maxRetry: 3,
  timeout: 3000
})
.then(() => {
  console.log("腳本加載成功");
})
.catch((err) => {
  console.error("腳本加載最終失?。?, err);
  // 加載重試依舊失敗可以提示用戶，比如提示用戶刷新
  // alert('資源加載失敗，請(qǐng)重新刷新頁面')
});

5. 多源備份加載

上面我們提到了，由于我們是單節(jié)點(diǎn)一旦節(jié)點(diǎn)故障就會(huì)出現(xiàn)加載失敗的問題，既然如此我們還可以準(zhǔn)備多個(gè)地址：

const cdnList = [
  "https://cdn1.yourname.com/app.js",
  "https://cdn2.yourname.com/app.js",
  "https://cdn3.yourname.com/app.js"
];

(async () => {
  for (const url of cdnList) {
    try {
      await loadScript(url);
      console.log("成功加載：", url);
      break;
    } catch (e) {
      console.warn("失敗，嘗試下一個(gè)源：", url);
    }
  }
})();

這樣，即使某個(gè) CDN 節(jié)點(diǎn)徹底掛了，也能通過備用源恢復(fù)