Qual è la differenza tra i tag <script>, <script async> e <script defer>?

• <script>: L’analisi HTML si interrompe, lo script viene caricato ed eseguito, poi l’analisi HTML riprende. Blocca il rendering.
• <script async>: Lo script viene caricato in modo asincrono, in parallelo con l’analisi HTML. Appena lo script è caricato, l’analisi HTML viene interrotta per eseguire lo script, poi riprende. L’ordine di esecuzione degli script asincroni non è garantito.
• <script defer>: Lo script viene caricato in modo asincrono, in parallelo con l’analisi HTML. L’esecuzione viene posticipata fino al completamento dell’analisi HTML e della costruzione del DOM. L’ordine di esecuzione degli script differiti viene mantenuto secondo l’ordine nel documento.

Ecco una tabella riassuntiva delle differenze:

Attributo	Caricamento	Esecuzione	Blocca l’analisi HTML	Ordine degli script
assente	Sincrono	Immediatamente dopo il caricamento	Sì	Garantito
async	Asincrono	Immediatamente dopo il caricamento (se l’HTML è ancora in analisi)	Sì (durante l’esecuzione)	Non garantito
defer	Asincrono	Dopo il caricamento completo dell’HTML e la costruzione del DOM	No (eccetto al momento dell’esecuzione, ma dopo l’HTML)	Garantito