Exploration des types de scripts async, defer et dynamiques.
De nos jours, les scripts peuvent être plus lourds que le HTML et leur taille de téléchargement est plus grande, et le temps de traitement est également plus long.
Mais il peut y avoir quelques problèmes importants tels que :
- Les scripts ne peuvent pas voir les éléments DOM en dessous d’eux
- S’il y a un script volumineux en haut de la page, il « bloque la page ». Les utilisateurs ne peuvent pas voir le contenu de la page avant qu’il ne soit téléchargé et exécuté.
On peut résoudre ce problème en plaçant le script à la fin (après html), mais cette solution obligera le script à se charger après le chargement de html. Pour les longs documents HTML, cela peut être un retard notable si les gens ont un internet lent.
Heureusement, il y a deux attributs <script> qui résolvent le problème pour nous : defer et async.
Avec l’attribut defer, le navigateur charge le script en mode ‘background’ et l’exécute lorsqu’il se charge.
Ainsi, le mode defer empêche de bloquer la page et les scripts avec defer s’exécutent toujours lorsque le DOM est prêt, mais avant l’événement DOMContentLoaded.
L’événement DOMContentLoaded se déclenche lorsque le document HTML initial a été complètement chargé et analysé, sans attendre que les feuilles de style, les images et les sous-cadres aient fini de se charger.
Les scripts différés conservent leur ordre relatif, tout comme les scripts ordinaires. Ainsi, si nous avons d’abord un long script, puis un plus petit, ce dernier attend.
Mais l’attribut defer est ignoré si la balise <script> n’a pas de src.
Async
L’attribut async signifie qu’il aide le script à se charger en mode ‘indépendant’.
Le navigateur charge les pages sans attendre que les scripts async se chargent. DOMContentLoaded et les scripts asynchrones n’attendent pas les uns les autres (ordre « load-first »).
Les autres scripts n’attendent pas les scripts async, et les scripts async ne les attendent pas. Le mode asynchrone (comme le mode différé) ne bloque pas la page.
Les scripts asynchrones sont parfaits lorsque nous intégrons un script tiers indépendant dans la page : compteurs, publicités, outils analytiques et ainsi de suite, car ils ne dépendent pas de nos scripts, et nos scripts ne doivent pas les attendre.
Dynamique
Nous pouvons également ajouter un script dynamiquement en utilisant JavaScript:
Le script commence à se charger dès qu’il est ajouté au document et se comporte par défaut comme des scripts « asynchrones ».
Cela signifie :
- Ils n’attendent rien, rien ne les attend.
- Le script qui se charge en premier – s’exécute en premier (ordre « load-first »).
Mais on peut désactiver le mode asynchrone pour les scripts dynamiques en paramétrant script.async = false avant de l’annexer au html.
Summary
Les deux async et defer ont un point commun : le téléchargement de ces scripts ne bloque pas le rendu de la page. Ainsi, l’utilisateur peut lire le contenu de la page et se familiariser avec elle immédiatement.
Merci de votre lecture. J’espère que vous l’avez aimé 😎
.