HTML defer-Attribut
Das HTML defer-Attribut legt fest, dass ein Skript nach dem vollständigen Parsen der Seite ausgeführt wird. Wie Sie es am <script>-Element einsetzen, erfahren Sie hier.
Das HTML defer-Attribut ist ein boolean-Attribut des <script>-Elements, das den Browser anweist, das Skript parallel zum HTML-Parsing herunterzuladen, es jedoch zu warten und erst nach dem vollständigen Parsen der Seite auszuführen — unmittelbar bevor das DOMContentLoaded-Ereignis ausgelöst wird.
Es funktioniert nur mit externen Skripten: Es hat nur dann einen Effekt, wenn das src-Attribut vorhanden ist, und wird bei Inline-Skripten (einem <script>, dessen JavaScript sich zwischen den Tags befindet) ignoriert.
Warum das defer-Attribut existiert
Ein einfaches <script src="..."> ist render-blockierend. Wenn der Parser darauf trifft, hält er den Seitenaufbau an, lädt die Datei herunter, führt sie aus und fährt erst dann fort. Befindet sich das Skript im <head>, starrt der Benutzer auf eine leere Seite, bis es geladen ist.
Die klassische Umgehungslösung bestand darin, <script>-Tags ganz am Ende des <body> zu platzieren, damit das HTML zuerst geparst wird. defer macht diesen Trick überflüssig: Sie können Ihre Skripte im <head> belassen (gut für die Lesbarkeit und damit der Browser sie früh entdeckt und herunterlädt), während das Skript trotzdem erst nach dem vollständigen Aufbau des DOM ausgeführt wird. Da das DOM garantiert bereit ist, können verzögerte Skripte Elemente sicher abfragen, ohne alles in einen DOMContentLoaded-Listener einzuwickeln.
defer vs. async
Sowohl defer als auch async ermöglichen es dem Browser, das Skript im Hintergrund herunterzuladen, ohne das HTML-Parsing zu blockieren. Der Unterschied liegt darin, wann und in welcher Reihenfolge die Skripte ausgeführt werden:
| Verhalten | defer | async |
|---|---|---|
| Blockiert das HTML-Parsing beim Download | Nein | Nein |
| Wann das Skript ausgeführt wird | Nach Abschluss des Parsings, kurz vor DOMContentLoaded | Sobald der Download abgeschlossen ist (kann das Parsing unterbrechen) |
| Ausführungsreihenfolge bei mehreren Skripten | Eingehalten — wird in Dokumentreihenfolge ausgeführt | Nicht garantiert — das zuerst heruntergeladene wird zuerst ausgeführt |
| DOM garantiert bereit | Ja | Nein |
Verwenden Sie defer, wenn Skripte vom DOM oder voneinander abhängen (die Reihenfolge ist wichtig). Verwenden Sie async für unabhängige, in sich geschlossene Skripte wie Analytics oder Werbetags, bei denen die Reihenfolge keine Rolle spielt und jedes ausgeführt werden soll, sobald es eintrifft.
Wenn weder async noch defer vorhanden ist, wird das Skript sofort abgerufen und ausgeführt, was den Parser an dieser Stelle blockiert.
In HTML 4.01 war das Verhalten von defer implementierungsabhängig, während HTML5 es standardisierte. In XHTML muss defer als <script defer="defer"> geschrieben werden, da die Attributminimierung verboten ist.
Syntax
<script src="example.js" defer></script>Beispiel für das HTML defer-Attribut
Das folgende Skript befindet sich im <head>, wird aufgrund der Verzögerung jedoch erst ausgeführt, nachdem der Absatz im DOM vorhanden ist — sodass document.getElementById ihn findet:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
defer
></script>
<noscript>Sorry, your browser doesn't support JavaScript!</noscript>
</head>
<body>
<h1>Example</h1>
<p id="demo">Waiting for the deferred script...</p>
<script defer>
// This deferred external script (jQuery) is already loaded,
// and the DOM is fully parsed, so the line below works.
document.getElementById("demo").textContent =
"jQuery version " + jQuery.fn.jquery + " ran after parsing.";
</script>
</body>
</html>Hinweis:
deferbeim obigen Inline-<script>wird ignoriert — Inline-Skripte werden immer an Ort und Stelle ausgeführt. Es funktioniert hier trotzdem, weil es das letzte Element ist und das verzögerte externe Skript bereits abgeschlossen hat. Um sicherzustellen, dass eine externe verzögerte Bibliothek vor Ihrem eigenen Code geladen wird, verschieben Sie Ihren Code ebenfalls in eine eigene externedefer-Datei, da verzögerte Skripte in Dokumentreihenfolge ausgeführt werden.