Async et Defer en JavaScript

Async et Defer en JavaScript

Async et Defer en JavaScript

Avec HTML5, nous obtenons deux nouveaux attributs booléens pour la balise script async et defer. Async autorise l'exécution de scripts de manière asynchrone et le report autorise l'exécution uniquement après que l'ensemble du document a été analysé.

Ces deux attributs sont indispensables pour augmenter la vitesse et les performances des sites Web. Ils permettent d'éliminer le Render-Blocking de JavaScript là où la page devrait charger et exécuter des scripts avant de terminer le rendu de la page. Voici un exemple d'utilisation:



    <script defer src="/js/jquery.min.js"> </script> 
    <script async src="/js/extras.min.js"> </script>

Avec async, le fichier est téléchargé de manière asynchrone, puis exécuté dès qu'il est téléchargé.

Avec defer, le fichier est téléchargé de manière asynchrone, mais exécuté uniquement lorsque l'analyse du document est terminée. Avec defer, les scripts s'exécuteront dans le même ordre qu'ils sont appelés. Cela fait reporter l'attribut de choix lorsqu'un script dépend d'un autre script. Par exemple, si vous utilisez jQuery ainsi que d'autres scripts qui en dépendent, vous devez utiliser le report sur eux (jQuery inclus), en veillant à appeler jQuery avant les scripts dépendants.

Une bonne stratégie consiste à utiliser async lorsque cela est possible, puis à reporter lorsque l'async n'est pas une option.

Merci