Timeout für das Laden von CDN-Links hinzufügen: Timeout-Mechanismus im Head-Tag implementieren

Question

Ich verwende ein CDN, um einige Stile zu laden. Es funktioniert gut für Maschinen ohne konfigurierten Proxy. Aber manchmal verwenden Benutzer einen Proxy, um eine Verbindung zu einer Webseite herzustellen, die das CDN nicht auflösen kann, was dazu führt, dass das Laden der Seite lange dauert oder überhaupt nicht geladen wird, es sei denn, der Benutzer erzwingt eine Aktualisierung.

Gibt es eine Möglichkeit, ein Attribut oder etwas anderes im HTML-Code anzugeben, um zu vermeiden, dass versucht wird, Ressourcen zu laden, wenn diese nicht analysiert werden können?

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>

你需要将这个脚本放在头部的早些位置，这肯定会稍微减慢页面加载速度。