Optimisation des bibliothèques externes avec l'attribut defer : augmentation de la vitesse des pages

Lors de la création d'un site Web, les développeurs s'appuient souvent sur des bibliothèques externes pour améliorer les fonctionnalités. Bien que ces bibliothèques soient essentielles, elles peuvent avoir un impact sur les performances, car chaque script externe nécessite une requête HTTP supplémentaire, et son analyse, son évaluation et son exécution peuvent bloquer le rendu du contenu principal de la page. Pour empêcher ces scripts de bloquer le processus de rendu, les développeurs peuvent utiliser les attributs async ou defer lors de la liaison de scripts externes.

Le rôle du report
L'attribut defer garantit qu'un script n'est pas exécuté tant que l'analyse HTML n'est pas terminée. Cela permet d'accélérer le rendu initial de la page. Cependant, lorsque vous utilisez des bibliothèques externes différées, vous pouvez rencontrer des cas où certaines fonctionnalités (par exemple, l'initialisation de curseurs, de carrousels ou d'animations) ne s'exécutent pas comme prévu. Cela se produit parce que le code à l'intérieur du script différé n'est exécuté qu'une fois le code HTML entièrement analysé, mais parfois les bibliothèques externes nécessaires peuvent ne pas être disponibles à temps.

Comprendre DOMContentLoaded et charger les événements
Pour garantir que votre code personnalisé s'appuyant sur des bibliothèques externes s'exécute correctement, vous devez gérer soigneusement le moment où votre code s'exécute. Deux événements JavaScript sont particulièrement utiles lorsqu'il s'agit de scripts différés

DOMContentLoaded : Cet événement se déclenche lorsque le document HTML initial a été complètement chargé et analysé, sans attendre le chargement des feuilles de style, des images ou d'autres ressources externes. C'est utile lorsque votre code dépend uniquement de la préparation de la structure DOM.

document.addEventListener('DOMContentLoaded', function() { 
// Initialize your script once the DOM is fully parsed 

console.log("DOM is ready, but external resources might still be loading."); 
});

load : L'événement load se déclenche lorsque la page entière, y compris toutes les ressources dépendantes telles que les feuilles de style, les images et les scripts externes, est entièrement chargée. Cet événement garantit que toutes les ressources externes nécessaires sont disponibles avant d'exécuter votre code.

window.addEventListener('load', function() { 
// Execute code when the entire page and resources are loaded 

console.log("All resources including external scripts are fully loaded."); 
});

<script defer src="https://example.com"></script>
<script defer src="https://example2.com"></script>
<script>
    // Wait for the entire page, including scripts, to load
    window.addEventListener('load', function() {
        // Initialize example2 library with predefined configuration after all resources are fully loaded
        example2(somePredefinedConfig).functionCall();
    });
</script>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!