为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>

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