Logo INGIN - société de développement informatique spécialisé dans la refonte de site internet
Bouton de scroll vers le haut
Partager cet article

Développement JavaScript - différences entre les attributs async et defer

Développement JavaScript - différences entre les attributs async et defer
Script loading attributes test (@github)

Quelles sont les spécificités/différences entre les attributs "async" et "defer" dans les balises "script" ?

Développements JavaScript, différences entre attribut async et defer dans la balise script

Développements JavaScript, différences entre attribut async et defer dans la balise script

Développements JavaScript, comment utiliser l'API "performance" avec les méthodes mise à disposition par le navigateur ?

  • performance.mark,
  • performance.measure
  • performance.getEntriesByType

I - Clonez mon repo github, installer et accédez aux résultat du test sur votre machine (localhost)

Le résultat du test est accessible en local sur l'adresse suivante : http://localhost:3000 - Ensuite, ouvrez la console de Chrome et observez le résultat

II - Editez le fichier index.html

Ouvrez le fichier index.html avec votre éditeur et vérifiez qu'il n'y a aucun attribut dans la balise script

III - Résultat du test sans attribut

<script src="js/main.js"></script>

  • domRoot1 not ready // Dom was not ready yet when script was executed (nothing was found) !
  • domRoot2 not ready // Dom was not ready yet when script was executed (nothing was found) !

Dans ce mode, le chargement du script est bloquant. Les bonnes pratiques de développements incite à ne pas/plus utiliser ce mode car le reste de la page est bloquée tant que votre script n'est pas chargé intégralement.

IV - Résultat du test avec l'attribut "async"

<script async src="js/main.js"></script>

  • domRoot1 [object HTMLDivElement] // one node has been found !
  • domRoot2 not ready // Dom was not ready yet (nothing was found) !

Dans ce mode, le chargement du script n'est pas bloquant mais ATTENTION, l'execution du script commencera immédiatement une fois le script téléchargé, et ce, quel que soit l'état d'avancement du chargement du reste de la page. Autrement dit, si votre script réalise une opération sur le DOM en fin de page, il y a de grandes chances pour que le script crache une erreur dans la console du type "Uncaught TypeError: Cannot read property [ERROR_TYPE] of null"

V - Résultat du test avec l'attribut "defer"

<script defer src="js/main.js"></script>

  • domRoot1 [object HTMLDivElement] // one node has been found !
  • domRoot2 [object HTMLDivElement] // one node has been found !

Dans ce mode, le chargement du script n'est pas bloquant mais l'execution du script ne commencera que lorsque le DOM sera chargé entièrement. Cela permet d'une part, de ne pas dégrader l'expérience utilisateur car le reste de la page continue de se charger pendant le téléchargement du script et d'une autre part, d'éviter d'avoir à gérer le "DOM Ready" avant d'executer son script.

Conclusion

  • async => the navigator doesn't block DOM parsing during script loading but it doesn't wait the end of DOM parsing before script execution start
  • defer => the navigator doesn't block DOM parsing and wait the end of DOM parsing before script execution start.
Partager cet article
    Réagir à cet article
    Icon de profil de Gcadoret sur ingin.fr