⏳ Simulator für das Laden von Skripten (async vs. defer)

Anleitung

1. Stellen Sie mit den Schiebereglern die Dauer für HTML-Parsing, Skript-Download und Skriptausführung ein.
2. Vergleichen Sie, welchen Unterschied die Platzierung eines gewöhnlichen Skripts macht – im head oder ganz am Ende des body.
3. Betrachten Sie die drei Varianten Standard, Async und Defer nebeneinander und verfolgen Sie live, wie sich die Verzögerung beim Parsen verändert.

FAQ

Was unterscheidet async und defer grundsätzlich?

Beide laden das Skript parallel zum HTML-Parsing herunter. Bei async wird das Parsen jedoch sofort nach dem Download unterbrochen, um das Skript auszuführen. Bei defer wartet die Ausführung, bis das HTML vollständig geparst ist.

Was nehme ich, wenn mehrere Skripte in einer festen Reihenfolge laufen müssen?

Auf keinen Fall async – dort wird jedes Skript sofort nach seinem Download ausgeführt, die Reihenfolge ist also zufällig und bei Abhängigkeiten riskant. Mit defer bleibt die im HTML notierte Reihenfolge garantiert erhalten, was etwa beim Einbinden aufeinander aufbauender Bibliotheken wichtig ist.

Wie unterscheidet sich ein mit type='module' geladenes Skript von den async/defer-Einstellungen?

Browser behandeln Modulskripte standardmäßig wie defer — sie blockieren das Parsen nicht, und die Ausführung wartet, bis das Dokument vollständig geparst ist. Fügen Sie zusätzlich das async-Attribut hinzu, wird ein Modulskript stattdessen sofort nach Abschluss des Downloads ausgeführt, genau wie ein normales async-Skript.