Maîtriser les balises de script : utiliser Async et Defer pour un contrôle précis des scripts

Dans le monde du développement web, optimiser les temps de chargement des pages est crucial. Deux attributs puissants du La balise – asynchrone et différée – peut avoir un impact significatif sur les performances de votre site Web. Utiliser ces attributs sans les comprendre parfaitement peut affecter les performances et entraîner des bugs. Commençons par les bases et apprenons à quoi servent ces attributs et quand les utiliser.

Les bases : comment les scripts se chargent

Par défaut, lorsqu'un navigateur rencontre un tag, ça :

Suspend l'analyse HTML Télécharge le script Exécute le script Reprend l'analyse HTML

Ce processus peut ralentir le rendu des pages, notamment 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. Attention : Peut s'exécuter dans le désordre, risquant ainsi de briser les dépendances.

Reporter

Ce qu'il fait : Télécharge le script pendant que l'analyse HTML continue. 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. Attention : Peut retarder l'exécution de fonctionnalités critiques.

Comparer les comportements

Attribute Download Execution HTML Parsing Main Risk None Blocks Immediate Paused Slow Initial Render Async Parallel ASAP Paused when downloaded Race Conditions Defer Parallel After HTML Continues Delayed Functionality

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 :

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. 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é. Différer les scripts :

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. 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.js (bloque l'analyse) 3.js ou 2.js (selon le premier téléchargement) 2.js ou 3.js (selon le deuxième téléchargement) 4.js 5.js

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

Meilleures pratiques

Utilisez async pour les scripts indépendants comme l'analyse. Utilisez defer pour les scripts qui dépendent du DOM ou d'autres scripts. Placez les scripts dans le répertoire avec async ou différer pour commencer le téléchargement plus tôt. 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 .