Async vs Defer : une explication simple du chargement de script

Lorsqu'il s'agit de charger du JavaScript sur un site Web, il est important de comprendre comment les différentes méthodes de chargement peuvent avoir un impact sur les performances et le comportement de votre site Web. JavaScript peut être chargé de différentes manières, principalement en utilisant la méthode de chargement par défaut, async et différé. Chacune de ces méthodes a ses propres caractéristiques et cas d’utilisation. Dans cet article, nous explorerons ces trois méthodes pour vous aider à prendre des décisions éclairées pour vos projets.

Chargement par défaut

Par défaut, les fichiers JavaScript sont chargés de manière synchrone lorsqu'ils sont inclus dans un document HTML. Cela signifie que le navigateur mettra en pause l'analyse du document HTML pour télécharger et exécuter le fichier JavaScript avant de continuer.

Voici comment inclure généralement un script en utilisant la méthode par défaut :

<script src="script.js"></script>

Chargement asynchrone

L'attribut async permet au navigateur de télécharger le fichier JavaScript de manière asynchrone pendant qu'il continue d'analyser le document HTML. Une fois le script téléchargé, il est exécuté immédiatement, potentiellement avant que l'analyse HTML ne soit terminée.

<script src="script.js" async></script>

Différer le chargement

L'attribut defer télécharge également le fichier JavaScript de manière asynchrone, mais la principale différence est que le script n'est exécuté qu'une fois le document HTML entièrement analysé.

<script src="script.js" defer></script>

Comparaison des trois méthodes

Conseils rapides

1. Utiliser async pour les scripts non critiques : pour les scripts tels que les analyses, les publicités et autres intégrations tierces qui ne dépendent pas du DOM.
2. Utilisez defer pour les scripts dépendants du DOM : pour les scripts qui manipulent le DOM ou doivent être exécutés dans un ordre spécifique.
3. Réduire le chargement des scripts par défaut : évitez le chargement synchrone par défaut pour les scripts volumineux ou les scripts pouvant être chargés de manière asynchrone.
4. Charger les scripts en bas du corps : si vous devez utiliser le comportement de chargement par défaut, placez votre
   • Une analyse approfondie du composant de groupe de liste Bootstrap
   • Explication détaillée du currying de la fonction JavaScript
   • Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
   • Angularjs intègre l'interface utilisateur WeChat (weui)
   • Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript