Wat is het verschil tussen de tags <script>, <script async> en <script defer>?

De standaard <script>-tag stopt de HTML-parsering, laadt het script en voert het uit, waarna de parsering doorgaat.

<script async> laadt het script asynchroon, terwijl de HTML-parsering doorgaat. Het script wordt onmiddellijk uitgevoerd na het laden. De volgorde van uitvoering is niet gegarandeerd.

<script defer> laadt het script asynchroon, terwijl de HTML-parsering doorgaat. Het script wordt alleen uitgevoerd na het voltooien van de HTML-parsering, maar vóór het DOMContentLoaded-evenement. De volgorde van uitvoering van defer-scripts wordt behouden volgens hun verschijning in de HTML.

Vergelijkingstabel:

Attribuut	HTML-parsering tijdens het laden van het script	Uitvoering van het script	Behoud van de uitvoer volgorde
Geen	Pauze	Direct na het laden	Ja
async	Gaat door	Direct na het laden (kan parsering onderbreken)	Nee
defer	Gaat door	Na voltooiing van de HTML-parsering	Ja

Voorbeeld:

<!-- Normaal script - blokkeert parsering -->
<script src="script1.js"></script>

<!-- Asynchroon script - blokkeert parsering niet, wordt direct na laden uitgevoerd -->
<script src="script2.js" async></script>

<!-- Uitgesteld script - blokkeert parsering niet, wordt uitgevoerd na HTML-parsering -->
<script src="script3.js" defer></script>
<script src="script4.js" defer></script> <!-- Wordt uitgevoerd na script3.js -->