Was ist der Unterschied in der Funktionsweise der Modi (async, defer oder type) des <script>-Tags?

<script> ohne Attribute

• HTML wird bis zum <script>-Tag geparst.
• Das Parsen des HTML wird pausiert, wenn das <script>-Tag erkannt wird.
• Das Skript wird geladen.
• Das Skript wird ausgeführt.
• Das Parsen des HTML wird nach der Ausführung des Skripts fortgesetzt.

<script async>

• HTML wird gleichzeitig mit dem Laden des Skripts geparst.
• Das Parsen des HTML wird beim Abschluss des Ladens des Skripts pausiert.
• Das Skript wird ausgeführt.
• Das Parsen des HTML wird nach der Ausführung des Skripts fortgesetzt.
• Die Ausführungsreihenfolge der Skripte mit async ist nicht garantiert, hängt von der Ladegeschwindigkeit ab.

<script defer>

• HTML wird gleichzeitig mit dem Laden des Skripts geparst.
• Das Skript wird nach Abschluss des HTML-Parsings ausgeführt, vor dem Ereignis DOMContentLoaded.
• Die Ausführungsreihenfolge der Skripte mit defer ist garantiert, entspricht der Reihenfolge im HTML.
• Verhalten ähnlich wie <script>, das vor dem schließenden </body>-Tag platziert ist.

<script type="module"> (für ECMAScript-Module)

• Wird standardmäßig wie <script defer> behandelt (verzögerte Ausführung nach Parsing, Reihenfolge wird beibehalten).
• Kann mit dem Attribut async verwendet werden.
• Unterstützt Import/Export von Modulen. Erstellt einen eigenen Gültigkeitsbereich (Scope).

Attribut	Laden des Skripts	Ausführen des Skripts	Blockiert HTML-Parsing	Ausführungsreihenfolge
Kein	Blockierend	Blockierend	Ja	Wird beibehalten
async	Nicht blockierend (parallel)	Nicht blockierend (bei Abschluss des Ladens)	Nein	Nicht garantiert
defer	Nicht blockierend (parallel)	Nicht blockierend (nach HTML-Parsing)	Nein	Wird beibehalten
type="module"	Nicht blockierend (parallel)	Nicht blockierend (nach HTML-Parsing, standardmäßig)	Nein	Wird beibehalten (standardmäßig)

// Beispiel für ein einfaches Skript
console.log('Normales Skript');

// Beispiel für ein asynchrones Skript
console.log('Asynchrones Skript');

// Beispiel für ein verzögertes Skript
console.log('Verzögertes Skript');

// Beispiel für ein Modul
import { someFunction } from './module.js';
someFunction();
console.log('Modul-Skript');