Was ist der Unterschied zwischen den Tags <script>, <script async> und <script defer>?

Der Standard-<script>-Tag stoppt das HTML-Parsing, lädt das Skript und führt es aus, dann wird das Parsing fortgesetzt.

<script async> lädt das Skript asynchron, während das HTML-Parsing fortgesetzt wird. Das Skript wird sofort nach dem Laden ausgeführt. Die Ausführungsreihenfolge ist nicht garantiert.

<script defer> lädt das Skript asynchron, während das HTML-Parsing fortgesetzt wird. Das Skript wird nur nach Abschluss des HTML-Parsings ausgeführt, aber vor dem DOMContentLoaded-Event. Die Reihenfolge der Ausführung von defer-Skripten bleibt entsprechend ihrer Reihenfolge im HTML.

Vergleichstabelle:

Attribut	HTML-Parsing während des Ladens des Skripts	Skriptausführung	Reihenfolge der Ausführung bewahren
Kein	Pause	Direkt nach dem Laden	Ja
async	Wird fortgesetzt	Direkt nach dem Laden (kann Parsing unterbrechen)	Nein
defer	Wird fortgesetzt	Nach Abschluss des HTML-Parsings	Ja

Beispiel:

<!-- Normales Skript - blockiert das Parsing -->
<script src="script1.js"></script>

<!-- Asynchrones Skript - blockiert das Parsing nicht, wird sofort nach dem Laden ausgeführt -->
<script src="script2.js" async></script>

<!-- Verzögertes Skript - blockiert das Parsing nicht, wird nach dem HTML-Parsing ausgeführt -->
<script src="script3.js" defer></script>
<script src="script4.js" defer></script> <!-- Wird nach script3.js ausgeführt -->