HTMLScriptElement.defer — Eigenschaft · JavaScript-Referenz

Signatur

HTMLScriptElement.defer

Beschreibung

Die Eigenschaft defer des HTMLScriptElement-Interfaces spiegelt das gleichnamige HTML-Attribut wider. Ist sie true, lädt der Browser ein externes klassisches Skript (mit src) parallel zum Parsen des HTML herunter, führt es aber erst aus, wenn das Dokument vollständig geparst ist – und zwar unmittelbar vor dem Ereignis DOMContentLoaded.

Mehrere Skripte mit defer werden in der Reihenfolge ausgeführt, in der sie im Dokument stehen. Das unterscheidet defer von async: Skripte mit async laufen sofort nach dem Download, ohne feste Reihenfolge. defer eignet sich daher besonders für Skripte, die auf den vollständigen DOM zugreifen oder voneinander abhängen.

Wichtig: defer hat keine Wirkung auf Inline-Skripte (ohne src) und auf Modul-Skripte (type="module"), die ohnehin standardmäßig verzögert ausgeführt werden. Bei dynamisch per JavaScript eingefügten Skripten ist defer praktisch bedeutungslos, da das Parsen zu diesem Zeitpunkt meist abgeschlossen ist – dort steuert man die Reihenfolge über async.

Parameter

Name	Typ	Default	Beschreibung
$value	boolean	false	Beim Setzen: `true` fügt das Attribut `defer` hinzu, `false` entfernt es.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn das Attribut defer am <script>-Element vorhanden ist, sonst false.

Beispiele

defer-Status aller Skripte auslesen

// Listet alle externen Skripte mit ihrem Ladeverhalten auf
document.querySelectorAll('script[src]').forEach((script) => {
  const modus = script.defer ? 'defer' : script.async ? 'async' : 'blockierend';
  console.log(`${script.src} → ${modus}`);
});

https://example.com/app.js → defer https://example.com/analytics.js → async

Dynamisches Skript mit geordneter Ausführung

// Bei dynamisch eingefügten Skripten greift defer nicht zuverlässig.
// Für feste Reihenfolge async = false setzen.
const ladeSkript = (src) => {
  const script = document.createElement('script');
  script.src = src;
  script.async = false; // Ausführung in Einfügereihenfolge
  console.log('defer:', script.defer); // false
  document.head.append(script);
};

ladeSkript('/js/bibliothek.js');
ladeSkript('/js/plugin.js'); // läuft nach bibliothek.js

defer: false defer: false

Attribut per Eigenschaft setzen und prüfen

const script = document.createElement('script');
script.src = '/js/widget.js';
script.defer = true;

console.log(script.hasAttribute('defer')); // true
console.log(script.outerHTML);

script.defer = false;
console.log(script.hasAttribute('defer')); // false

true <script src="/js/widget.js" defer=""></script> false

// Wichtig · Fallstricke

Nur für externe klassische Skripte wirksam: Bei Inline-Skripten und type="module" wird defer ignoriert (Module verhalten sich ohnehin wie defer).
async hat Vorrang: Sind async und defer gesetzt, verhält sich das Skript in modernen Browsern wie async. defer diente früher als Rückfall für Browser ohne async-Unterstützung.
Dynamische Skripte: Per createElement eingefügte Skripte sind standardmäßig async = true; das Setzen von defer ändert daran nichts Verlässliches. Verwende async = false für geordnete Ausführung.
Kein document.write(): Verzögerte Skripte dürfen document.write() nicht nutzen, da das Dokument bereits geparst ist.
Ältere Internet-Explorer-Versionen (≤ 9) garantierten die Ausführungsreihenfolge nicht; alle modernen Browser unterstützen defer vollständig.

Siehe auch

HTMLInputElement.pattern HTMLOptionElement.label HTMLScriptElement.text HTMLScriptElement.type HTMLScriptElement.async