Care este diferența dintre etichetele <script>, <script async> și <script defer>?

Eticheta <script> standard oprește analiza HTML, încarcă scriptul și îl execută, apoi analiza continuă.

<script async> încarcă scriptul asincron, în timp ce analiza HTML continuă. Scriptul se execută imediat după încărcare. Ordinea de execuție nu este garantată.

<script defer> încarcă scriptul asincron, în timp ce analiza HTML continuă. Scriptul se execută doar după finalizarea analizei HTML, dar înainte de evenimentul DOMContentLoaded. Ordinea de execuție a scripturilor cu defer este păstrată conform apariției lor în HTML.

Tabel comparativ:

Atribut	Analiza HTML în timpul încărcării scriptului	Execuția scriptului	Păstrarea ordinii de execuție
Niciunul	Pauză	Imediat după încărcare	Da
async	Continuă	Imediat după încărcare (poate întrerupe analiza)	Nu
defer	Continuă	După finalizarea analizei HTML	Da

Exemplu:

<!-- Script normal - blochează analiza -->
<script src="script1.js"></script>

<!-- Script asincron - nu blochează analiza, se execută imediat după încărcare -->
<script src="script2.js" async></script>

<!-- Script întârziat - nu blochează analiza, se execută după analiza HTML -->
<script src="script3.js" defer></script>
<script src="script4.js" defer></script> <!-- Se va executa după script3.js -->