Lorsqu’il s’agit de charger des fichiers JavaScript, il existe plusieurs options différentes. Comprendre exactement comment les scripts sont chargés et exécutés est crucial pour les performances du site Web, ainsi que pour la qualité globale de l’expérience utilisateur. Voyons comment le <script> et comment certains attributs affectent son comportement.
Aucun attribut
Le plus souvent, un simple <script> sans attributs est ce avec quoi la plupart des gens ont tendance à commencer. Ceci met en œuvre le comportement par défaut du navigateur. Le HTML sera analysé jusqu’à ce que la balise script soit rencontrée. À ce moment-là, l’analyse HTML est interrompue et le script est chargé. Le script sera alors exécuté avant que l’analyse HTML ne reprenne.
<script src="script.js"></script>
Comme vous pouvez le constater, cette méthode peut provoquer une longue pause dans l’analyse HTML, ce qui entraîne une dégradation de l’expérience utilisateur.
L’attribut asynchrone
Pour éviter une longue pause dans l’analyse HTML, l’attribut async peut être utilisé. Ainsi, lorsque le script est rencontré, l’analyse ne s’interrompt pas immédiatement. Au contraire, le script est chargé en arrière-plan et seule l’analyse HTML est mise en pause pour l’exécuter. L’analyse HTML reprend comme d’habitude une fois l’exécution du script terminée.
<script src="script.js" async></script>
Bien que le async prend des mesures pour atténuer le problème mentionné précédemment, il s’accompagne d’une mise en garde importante. Les scripts chargés de cette manière ne sont pas garantis de s’exécuter dans l’ordre spécifié, mais plutôt au fur et à mesure qu’ils deviennent disponibles lorsqu’ils sont chargés.
L’attribut de report
Enfin, l’attribut defer s’ajoute au comportement précédent pour garantir l’ordre d’exécution des scripts. Comme précédemment, les scripts sont chargés en arrière-plan au fur et à mesure qu’ils sont rencontrés. Lorsque l’analyse HTML est terminée, ils sont exécutés dans l’ordre.
<script src="script.js" defer></script>