Il est souvent utilie de pouvoir charger les scripts de manière asynchrone pour que le chargement du DOM ne soient pas bloquées. En effet, lorsque vous charger un script, le navigateur bloque les scripts en ligne car ceci retarde le chargement. Pourquoi ? Parce que votre navigateur ne sait pas ce que le script va faire car le javascripts peut travailler avec le DOM, le chargement du DOM est donc arrêté en attendant le chargement du script. Il faut savoir également que le chargement du script peut être arrêté à son tour car votre navigateur retardera l’exécution du script jusqu’à ce qu’il ait terminé de télécharger le CSSOM ( CSS Object Model ).
Ce qu’il faut retenir est la chose suivant lorsque vos fichiers ne sont pas asyncrone :
- Le navigateur charge la page
- La construction du DOM est arrêté lorsqu’une balise de script est appelé et attends de continuer le chargement de la page jusqu’à ce que le chargement du script ne soit terminée.
- L’exécution du script JavaScript peut-être stoppé également jusqu’à ce que le CSSOM soit prêt.
- Une fois le CSSOM charger, le Javascript peut continuer à charger
- Une fois le Javascript charger, la page peut continuer de s’afficher.
Solution
Utilisez l’attribut d’élément HTML5 async de la balise <script> :
<script src="https://www.gekkode.com/blog/post/app.js" async></script>Conclusion
Il existe deux attributs d’élément de script: defer, qui retarde le chargement du script jusqu’à ce que le reste de la page soit chargé, et le plus récent async. Ce dernier indique au navigateur de charger le script de manière asynchrone, au fur et à mesure de l’analyse de la page. Cela ne fonctionne qu’avec des scripts externes. la page bloque toujours avec des scripts en ligne <script> // Script en ligne... </script>.
···
