Quelle est la différence dans le fonctionnement des modes (async, defer ou type) de la balise <script>?

<script> sans attributs

• Le HTML est analysé jusqu'à la balise <script>.
• L'analyse du HTML est suspendue lors de la détection de la balise <script>.
• Le script est chargé.
• Le script est exécuté.
• L'analyse du HTML reprend après l'exécution du script.

<script async>

• Le HTML est analysé en même temps que le chargement du script.
• L'analyse du HTML est suspendue à la fin du chargement du script.
• Le script est exécuté.
• L'analyse du HTML reprend après l'exécution du script.
• L'ordre d'exécution des scripts avec async n'est pas garanti, dépend de la vitesse de chargement.

<script defer>

• Le HTML est analysé en même temps que le chargement du script.
• Le script s'exécute après la fin de l'analyse du HTML, mais avant l'événement DOMContentLoaded.
• L'ordre d'exécution des scripts avec defer est garanti, il correspond à l'ordre dans le HTML.
• Comportement similaire à <script> placé avant la balise de fermeture </body>.

<script type="module"> (pour modules ECMAScript)

• Traité comme <script defer> par défaut (exécution différée après l'analyse, ordre maintenu).
• Peut être utilisé avec l'attribut async.
• Supporte l'import/export de modules. Crée un espace de noms (scope) séparé.

Attribut	Chargement du script	Exécution du script	Blocage de l'analyse HTML	Ordre d'exécution
Aucun	Bloquant	Bloquant	Oui	Maintenu
async	Non bloquant (parallèle)	Non bloquant (à la fin du chargement)	Non	Non garanti
defer	Non bloquant (parallèle)	Non bloquant (après l'analyse HTML)	Non	Maintenu
type="module"	Non bloquant (parallèle)	Non bloquant (après l'analyse HTML, par défaut)	Non	Maintenu (par défaut)

// Exemple de script simple
console.log('Script normal');

// Exemple de script asynchrone
console.log('Script asynchrone');

// Exemple de script différé
console.log('Script différé');

// Exemple de module
import { someFunction } from './module.js';
someFunction();
console.log('Script module');