為CDN連結載入新增超時：在Head標籤中實作逾時機制

Question

我正在使用CDN加載一些樣式。對於沒有配置代理的機器，它可以正常工作。但有時人們可能使用代理連接到網頁，CDN無法解析，從而導致頁面加載時間很長或根本無法加載，除非用戶強制刷新。

有沒有辦法在HTML上指定一個屬性或其他東西，以避免在無法解析資源時嘗試載入它們？

Answer 1

據我所知，沒有原生的方法可以停止載入資源。實際上，如果在正常情況下無法取得資源，請求應該會自動逾時。

這種方法有點繁瑣，可能有更好的解決方案適用於您的特定問題。

但你可以嘗試從頭部刪除連結標籤，然後插入一個腳本來取得cdn的內容，然後動態地將包含內容的樣式標籤附加到頭部。類似這樣：

(function() {
  <script>
    const controller = new AbortController();
    const HOW_LONG_TO_WAIT_IN_MS = 5000;
    let loaded = false;

    fetch(URL_FOR_CDN, { signal: controller.signal })
      .then(response => response.text())
      .then(text => {
        document.head.append(`<style>${text}</style>`);
        loaded = true;
      });

      setTimeout(() => {
        if (!loaded) controller.abort();
      }, HOW_LONG_TO_WAIT_IN_MS);
})()
</script>

你需要將這個腳本放在頭部的早些位置，這肯定會稍微減慢頁面載入速度。