Quelle est la différence entre les balises <script>, <script async> et <script defer>?

La balise <script> standard arrête l’analyse du HTML, charge le script et l’exécute, puis l’analyse continue.

<script async> charge le script de manière asynchrone, pendant que l’analyse du HTML continue. Le script s’exécute immédiatement après le chargement. L’ordre d’exécution n’est pas garanti.

<script defer> charge le script de manière asynchrone, pendant que l’analyse du HTML continue. Le script ne s’exécute qu’après la fin de l’analyse du HTML, mais avant que l’événement DOMContentLoaded ne soit déclenché. L’ordre d’exécution des scripts avec defer est conservé selon leur apparition dans le HTML.

Tableau comparatif :

Attribut	Analyse du HTML pendant le chargement du script	Exécution du script	Conservation de l’ordre d’exécution
Aucun	Pause	Immédiatement après le chargement	Oui
async	Continue	Immédiatement après le chargement (peut interrompre l’analyse)	Non
defer	Continue	Après la fin de l’analyse du HTML	Oui

Exemple :

<!-- Script normal - bloque l’analyse -->
<script src="script1.js"></script>

<!-- Script asynchrone - ne bloque pas l’analyse, s’exécute immédiatement après le chargement -->
<script src="script2.js" async></script>

<!-- Script différé - ne bloque pas l’analyse, s’exécute après l’analyse du HTML -->
<script src="script3.js" defer></script>
<script src="script4.js" defer></script> <!-- S’exécutera après script3.js -->