Async vs Defer : Une utilisation intéressante de la balise script

Lorsque nous intégrons des scripts JavaScript dans nos pages web, nous avons plusieurs options pour charger et exécuter ces scripts. Deux attributs couramment utilisés dans la balise `<script>` sont « async » et « defer ». Dans cet article, nous explorerons ces deux options et discuterons de leurs utilisations intéressantes, en mettant l’accent sur les avantages techniques et les exemples concrets.

1. Comprendre les bases

Avant de plonger dans les détails techniques, il est essentiel de comprendre les différences fondamentales entre l’attribut « async » et l’attribut « defer ».

– « async » : Lorsque nous ajoutons l’attribut « async » à une balise `<script>`, cela indique au navigateur de télécharger le script de manière asynchrone pendant que le reste du contenu de la page continue de se charger. Une fois le téléchargement terminé, le script est immédiatement exécuté, interrompant potentiellement le rendu de la page.

– « defer » : En revanche, l’attribut « defer » permet de différer l’exécution du script jusqu’à ce que le contenu de la page soit complètement chargé. Le téléchargement du script est également asynchrone, mais son exécution est retardée jusqu’à ce que le navigateur ait terminé de traiter le reste de la page.

2. Utilisations intéressantes de « async »

L’attribut « async » peut être particulièrement utile dans certaines situations :

a) Scripts indépendants : Lorsque nous utilisons des scripts qui n’ont pas de dépendances vis-à-vis du chargement d’autres éléments de la page, l’utilisation de « async » permet de paralléliser le téléchargement du script avec le chargement du reste de la page, ce qui peut accélérer le temps de chargement global.

Exemple : `<script async src= »script.js »></script>`

b) Suivi de performances tiers : Lorsque nous intégrons des outils de suivi ou des scripts de publicité tiers, l’attribut « async » garantit que ces scripts ne bloquent pas le rendu de la page, offrant ainsi une meilleure expérience utilisateur.

Exemple : `<script async src= »https://exemple.com/outil-suivi.js »></script>`

3. Utilisations intéressantes de « defer »

L’attribut « defer » présente également des avantages intéressants :

a) Dépendances d’exécution : Si nous avons des scripts qui dépendent de l’exécution d’autres scripts ou du chargement de certaines ressources, l’attribut « defer » garantit que l’ordre d’exécution des scripts est respecté, même si leur téléchargement est asynchrone.

Exemple :

<script defer src= »librairie.js »></script>

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

b) Manipulation du DOM : L’attribut « defer » est utile lorsque nous avons besoin d’accéder et de manipuler les éléments du DOM. En différant l’exécution des scripts, nous nous assurons que le DOM est complètement chargé, offrant ainsi une interaction plus fluide avec les éléments de la page.

Exemple :

<script defer src= »app.js »></script>

 Conclusion

L’utilisation des attributs « async » et « defer » dans la balise `<script>` offre des possibilités intéressantes pour améliorer les performances et l’expérience utilisateur de nos sites web. En comprenant les différences entre les deux, nous pouvons choisir l’option la mieux adaptée à nos besoins spécifiques.

Que ce soit pour accélérer le chargement des scripts indépendants avec « async » ou pour garantir l’ordre d’exécution des scripts et manipuler le DOM avec « defer », ces attributs nous permettent d’optimiser nos pages web de manière significative.

Il est important de noter que l’utilisation de ces attributs nécessite une bonne compréhension de leurs implications et des contraintes liées à chaque scénario. En choisissant judicieusement entre « async » et « defer », nous pouvons créer des sites web plus performants, réactifs et offrant une meilleure expérience utilisateur.

En fin de compte, l’objectif est d’atteindre un équilibre entre la rapidité du chargement de la page et la disponibilité des fonctionnalités requises pour offrir une expérience utilisateur exceptionnelle.