Ajouter un délai d'attente pour le chargement du lien CDN : implémenter un mécanisme de délai d'attente dans la balise Head

Question

J'utilise un CDN pour charger certains styles. Cela fonctionne bien pour les machines sans proxy configuré. Mais parfois, les gens peuvent utiliser un proxy pour se connecter à une page Web que le CDN ne peut pas résoudre, ce qui fait que la page prend beaucoup de temps à se charger, voire ne se charge pas du tout, à moins que l'utilisateur ne force une actualisation.

Existe-t-il un moyen de spécifier un attribut ou quelque chose sur le code HTML pour éviter d'essayer de charger des ressources lorsqu'elles ne peuvent pas être analysées ?

Answer 1

Pour autant que je sache, il n'existe aucun moyen natif d'arrêter le chargement des ressources. En fait, la demande devrait automatiquement expirer si la ressource ne peut pas être obtenue dans des circonstances normales.

Cette méthode est un peu fastidieuse, il existe peut-être de meilleures solutions pour votre problème spécifique.

Mais vous pouvez essayer de supprimer la balise de lien de l'en-tête et d'insérer un script pour obtenir le contenu du cdn, puis d'ajouter dynamiquement la balise de style contenant le contenu à l'en-tête. Quelque chose comme ça :

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

Vous devez placer ce script plus tôt dans l'en-tête, ce qui ralentira certainement un peu la vitesse de chargement de la page.