Dans le monde du développement Web, l'optimisation des temps de chargement des pages est cruciale. Deux attributs puissants de la balise

Les bases : comment les scripts se chargent

Par défaut, lorsqu'un navigateur rencontre une balise

1. Suspend l'analyse HTML
2. Télécharge le script
3. Exécute le script
4. Reprend l'analyse HTML

Ce processus peut ralentir le rendu des pages, en particulier pour les scripts volumineux ou les connexions lentes. De plus, cela peut entraîner des bugs si le script s'exécute avant que certains éléments HTML ne soient complètement chargés, ce qui arrive souvent si le script n'est pas placé correctement dans le document.

Async et Defer : une épée à double tranchant

Asynchrone

• Ce qu'il fait : Télécharge le script de manière asynchrone pendant que l'analyse HTML se poursuit.
• Quand il s'exécute : Dès qu'il est téléchargé, pause de l'analyse HTML.
• Quand il est utilisé : Scripts indépendants qui ne dépendent pas d'autres scripts ou du contenu DOM.
• Mise en garde : Peut s'exécuter dans le désordre, ce qui peut potentiellement briser les dépendances.

Reporter

• Ce qu'il fait : Télécharge le script pendant que l'analyse HTML se poursuit.
• Quand il s'exécute : Une fois l'analyse HTML terminée, mais avant l'événement DOMContentLoaded.
• Quand il est utilisé : Scripts qui s'appuient sur le contenu DOM ou doivent être exécutés dans un ordre spécifique.
• Avertissement : Peut retarder l'exécution de fonctionnalités critiques.

Comparer les comportements

Ordre d'exécution : asynchrone, différé et les deux

Comprendre l'ordre d'exécution des scripts avec différents attributs est crucial pour gérer les dépendances et garantir une fonctionnalité appropriée. Voici comment cela fonctionne :

1. Scripts réguliers (pas d'asynchrone ni de report) :

   • Exécuter dans l'ordre dans lequel ils apparaissent dans le document.
   • Bloquez l'analyse HTML jusqu'à ce qu'ils soient téléchargés et exécutés.

2. Scripts asynchrones :

   • Téléchargez en parallèle et exécutez dès qu'ils sont disponibles.
   • Aucun ordre d’exécution garanti ; ils s'exécutent dès qu'ils sont téléchargés.
   • Peut s'exécuter avant que le DOM ne soit complètement chargé.

3. Scripts différés :

   • Téléchargez en parallèle mais exécutez uniquement une fois l'analyse HTML terminée.
   • Exécuter dans l'ordre dans lequel ils apparaissent dans le document.
   • Exécuter avant l'événement DOMContentLoaded.

4. Scripts avec asynchrone et différé :

   • L'attribut async est prioritaire dans les navigateurs modernes.
   • Dans les anciens navigateurs qui ne prennent pas en charge l'asynchrone, ils se contentent d'un comportement différé.

Exemple d'ordre d'exécution :

Ordre d'exécution possible :

1. 1.js (analyse des blocs)
2. 3.js ou 2.js (selon le premier téléchargement)
3. 2.js ou 3.js (selon le deuxième téléchargement)
4. 4.js
5. 5.js

Notez que 2 et 3 peuvent s'exécuter dans n'importe quel ordre ou même avant 1 si le téléchargement de 1.js prend plus de temps.

Meilleures pratiques

1. Utilisez async pour les scripts indépendants tels que les analyses.
2. Utilisez defer pour les scripts qui dépendent du DOM ou d'autres scripts.
3. Placez les scripts dans le avec async ou différé pour commencer le téléchargement plus tôt.
4. Pour les scripts critiques, envisagez les scripts en ligne dans le .

Prise en charge du navigateur

Async et defer sont largement pris en charge dans les navigateurs modernes. Pour les navigateurs plus anciens, envisagez d'utiliser un chargeur de script ou de placer les scripts à la fin du