Qual è la differenza nel funzionamento delle modalità (async, defer o type) del tag <script>?

<script> senza attributi

• L'HTML viene analizzato fino al tag <script>.
• L'analisi dell'HTML si interrompe al rilevamento del tag <script>.
• Lo script viene caricato.
• Lo script viene eseguito.
• L'analisi dell'HTML riprende dopo l'esecuzione dello script.

<script async>

• L'HTML viene analizzato contemporaneamente al caricamento dello script.
• L'analisi dell'HTML si interrompe al completamento del caricamento dello script.
• Lo script viene eseguito.
• L'analisi dell'HTML riprende dopo l'esecuzione dello script.
• L'ordine di esecuzione degli script con async non è garantito, dipende dalla velocità di caricamento.

<script defer>

• L'HTML viene analizzato contemporaneamente al caricamento dello script.
• Lo script viene eseguito dopo il completamento dell'analisi dell'HTML, ma prima dell'evento DOMContentLoaded.
• L'ordine di esecuzione degli script con defer è garantito, corrisponde all'ordine in cui appaiono nell'HTML.
• Comportamento simile a <script> posizionato prima della chiusura del tag </body>.

<script type="module"> (per moduli ECMAScript)

• Viene trattato come <script defer> di default (esecuzione differita dopo l'analisi, mantiene l'ordine).
• Può essere usato con l'attributo async.
• Supporta import/export di moduli. Crea un'area di scope separata.

Attributo	Caricamento script	Esecuzione script	Blocco analisi HTML	Ordine di esecuzione
Nessuno	Blocca	Blocca	Sì	Si mantiene
async	Non bloccante (parallelo)	Non bloccante (al completamento del caricamento)	No	Non garantito
defer	Non bloccante (parallelo)	Non bloccante (dopo l'analisi HTML)	No	Si mantiene
type="module"	Non bloccante (parallelo)	Non bloccante (dopo l'analisi HTML, di default)	No	Si mantiene (di default)

// Esempio di script semplice
console.log('Script normale');

// Esempio di script asincrono
console.log('Script asincrono');

// Esempio di script differito
console.log('Script differito');

// Esempio di modulo
import { someFunction } from './module.js';
someFunction();
console.log('Script modulo');