Avec HTML5, nous obtenons deux nouveaux attributs booléens pour la balise <script> : async et defer. Async permet l’exécution des scripts de manière asynchrone et defer permet l’exécution seulement après que le document entier ait été analysé.
Ces deux attributs sont un must pour augmenter la vitesse et les performances des sites web. Ils permettent d’éliminer le JavaScript bloquant le rendu où la page devrait charger et exécuter des scripts avant de finir de rendre la page. Voici un exemple d’utilisation :
<script defer src="https://www.digitalocean.com/js/jquery.min.js"></script>Async vs Defer
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é seulement lorsque l’analyse syntaxique du document est terminée. Avec defer, les scripts s’exécutent dans l’ordre où ils sont appelés. Cela fait de defer 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 utiliserez defer sur eux (jQuery inclus), en vous assurant d’appeler jQuery avant les scripts dépendants.
Une bonne stratégie consiste à utiliser l’async lorsque cela est possible, puis defer lorsque l’async n’est pas une option.
👉Notez que ces deux attributs n’ont aucun effet sur les scripts en ligne.
Support du navigateur
Can I Use script-async ? Données sur le support de la fonction script-async à travers les principaux navigateurs de caniuse.com.