Die Attribute async und defer
Laden Sie Skripte, ohne das Parsen von HTML zu blockieren
Die Attribute async und defer ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Standardverhalten von Skripten
Ein einfaches <script src="..."> ohne async oder defer blockiert das Parsen des HTML-Dokuments, während es heruntergeladen und ausgeführt wird. Das Rendern aller Inhalte unterhalb des Skripts wird pausiert. Deshalb befanden sich Skripte traditionell am Ende von <body>.
async lädt parallel herunter
<script async src="..."> lädt das Skript parallel zum Parsen des HTML-Dokuments herunter und führt es aus, sobald es eintrifft. Die Ausführung pausiert das HTML-Parsing weiterhin, aber nur kurz – das Skript blockiert den Download anderer Ressourcen nicht.
async-Ausführungsreihenfolge ist unvorhersehbar
Zwei async-Skripte werden in der Reihenfolge ausgeführt, in der ihr Download zuerst abgeschlossen ist. Verwenden Sie async niemals für voneinander abhängige Skripte, etwa jQuery vor einem jQuery-Plugin, da die Abhängigkeit ausgeführt werden kann, bevor die Voraussetzung verfügbar ist.
defer wartet auf HTML
<script defer src="..."> wird wie async parallel heruntergeladen, aber erst ausgeführt, wenn das HTML vollständig geparst ist – direkt vor dem DOMContentLoaded-Ereignis. Das Skript blockiert das Parsen nie.
<script defer src="app.js"></script>
<script defer src="analytics.js"></script>defer bewahrt die Reihenfolge
Mehrere defer-Skripte werden in ihrer Deklarationsreihenfolge ausgeführt, genau wie normale Skripte am Ende von body. Dadurch ist defer die richtige Wahl für voneinander abhängige Skripte: Hilfsfunktionen werden vor den sie verwendenden Skripten geladen, ohne dass eine manuelle Orchestrierung erforderlich ist.
Zwischen async und defer wählen
Verwenden Sie async für unabhängige Snippets von Drittanbietern wie Analytics oder Werbung, die das DOM nicht verändern und keine Abhängigkeiten haben. Verwenden Sie defer für Ihren eigenen Anwendungscode, der das DOM benötigt und von anderen Skripten abhängt.
Module werden standardmäßig verzögert ausgeführt
<script type="module"> verhält sich automatisch wie defer: Es wird parallel heruntergeladen, nach dem Parsen ausgeführt und bewahrt die Reihenfolge. defer zu einem Modul hinzuzufügen ist erlaubt, aber überflüssig; async hinzuzufügen aktiviert wieder das async-Verhalten.
Inline-Skripte ignorieren async/defer
async und defer gelten nur für externe Skripte mit src. Ein Inline-<script>-Tag wird unabhängig von den Attributen sofort ausgeführt. Daher werden die Attribute bei <script>console.log(1)</script> stillschweigend ignoriert.
Die Platzierung wird weniger wichtig
Mit defer oder Modulen können <script>-Tags im <head> stehen, ohne das Parsen zu blockieren. Außerdem kann der Browser sie dort früher entdecken und mit dem Download beginnen als am Ende von <body>.
<head>
<script defer src="app.js"></script>
</head>Mit preload kombinieren
Für latenzempfindliche Skripte kombinieren Sie <link rel="preload" as="script" href="..."> im Head mit einem verzögert ausgeführten <script> weiter unten. Der Preload startet den Download sofort, während defer dafür sorgt, dass die Ausführungsreihenfolge korrekt bleibt.
Häufige Fehlerquelle
Ein Skript mit async zu markieren, ohne zu prüfen, ob es wirklich keinerlei Abhängigkeiten hat, ist die häufigste Ursache für Race Conditions nach dem Muster „funktioniert bei mir, bricht in der Produktion“. Im Zweifel sollten Sie defer bevorzugen – es ist nachsichtig, während async unerbittlich ist.
Wissensfrage
Was ist der Unterschied zwischen async und defer, wenn das zweite von zwei Skripten vom ersten abhängt?
Zusammenfassung
async und defer laden Skripte beide parallel zum Parsen des HTML-Dokuments herunter. async wird bei Ankunft sofort und in unvorhersehbarer Reihenfolge ausgeführt und eignet sich für unabhängige Snippets von Drittanbietern. defer wird nach dem Parsen in Deklarationsreihenfolge ausgeführt und eignet sich für Anwendungscode mit Abhängigkeiten. Module verwenden standardmäßig das defer-Verhalten.
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 40
- Lektionen
- 159
Häufig gestellte Fragen
Ist die Lektion „Die Attribute async und defer“ kostenlos?
Ja — der vollständige Text von „Die Attribute async und defer“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Die Attribute async und defer“?
Laden Sie Skripte, ohne das Parsen von HTML zu blockieren Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um HTML Academy zu starten?
Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Die Attribute async und defer“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?
Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Die Attribute async und defer
- Preload Prefetch und Preconnect
- Lazy Loading für Bilder: loading=lazy
- Ressourcenhinweise: modulepreload