Damien Flandrin

Développeur Web

Javascript - Charger des scripts de manière asynchrone

il y a 11 mois · 1 MIN DE LECTURE
#Javascript  #Astuce 

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 :

  1. Le navigateur charge la page
  2. 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.
  3. L'exécution du script JavaScript peut-être stoppé également jusqu'à ce que le CSSOM soit prêt.
  4. Une fois le CSSOM charger, le Javascript peut continuer à charger
  5. 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="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>.

···

Damien Flandrin

Je suis développeur web pour l'agence Carredas, je fais principalement du PHP avec Laravel et de l'intégration sur des projets Wordpress.
comments powered by Disqus


Développeur Web - Damien Flandrin