Signatur
Beschreibung
Die schreibgeschützte Eigenschaft blocking eines HTMLScriptElement spiegelt das HTML-Attribut blocking als dynamische DOMTokenList wider. Die Liste enthält die Vorgänge, die blockiert werden sollen, solange das Skript geladen und ausgeführt wird. Laut Spezifikation gibt es derzeit nur einen gültigen Wert: render.
Mit blocking="render" wartet der Browser mit dem ersten Rendern der Seite, bis das Skript geladen und ausgeführt ist. Das ist vor allem bei async- oder type="module"-Skripten hilfreich. Diese blockieren das Rendern normalerweise nicht, müssen aber manchmal vor dem ersten Rendern laufen, damit die Seite nicht flackert. Typische Fälle sind A/B-Tests, das Umschalten des Farbschemas (Dunkelmodus), Übersetzungen oder die Vorbereitung von View Transitions.
Die Eigenschaft ist zwar schreibgeschützt, lässt sich aber über die Methoden der DOMTokenList ändern (add(), remove(), toggle(), contains()). Weist man ihr direkt einen String zu, wird dieser an value weitergeleitet und setzt damit das Attribut. Ob ein Wert unterstützt wird, prüft man mit script.blocking.supports("render").
Rückgabewert
blocking-Attribut. Einziger gültiger Wert ist derzeit "render". Fehlt das Attribut, ist die Liste leer.Beispiele
Attribut aus dem Markup auslesen
// HTML im <head>:
// <script id="theme" src="/js/theme.js" type="module" blocking="render"></script>
const script = document.getElementById('theme');
console.log(script.blocking.value); // Inhalt des Attributs
console.log(script.blocking.contains('render')); // blockiert das Skript das Rendern?
console.log(script.blocking.length);Funktion erkennen und Unterstützung von „render“ prüfen
const supportsRenderBlocking = () => {
if (!('blocking' in HTMLScriptElement.prototype)) return false;
const probe = document.createElement('script');
return probe.blocking.supports('render');
};
console.log(supportsRenderBlocking()
? 'Render-Blocking wird unterstützt'
: 'Nicht unterstützt – Ersatzlösung verwenden');Asynchrones A/B-Test-Skript vor dem ersten Rendern einfügen
// Dieses Inline-Skript steht im <head> und läuft, bevor <body> geparst wird
const script = document.createElement('script');
script.src = '/js/ab-test.js';
script.async = true;
if ('blocking' in script) {
script.blocking.add('render'); // kein Flackern, bis die Variante gesetzt ist
}
document.head.append(script);
console.log(script.getAttribute('blocking'));Token per Zuweisung setzen und wieder entfernen
const script = document.querySelector('script[src="/js/i18n.js"]');
// Eine Zuweisung wird an blocking.value weitergeleitet
script.blocking = 'render';
console.log(script.outerHTML.includes('blocking="render"'));
script.blocking.remove('render');
console.log(script.hasAttribute('blocking'), script.blocking.length);// Wichtig · Fallstricke
- Browser-Unterstützung: Die Eigenschaft gibt es nur in Chromium-basierten Browsern (ab Version 105). In Firefox und Safari ist sie
undefined. Prüfe die Unterstützung daher immer mit'blocking' in HTMLScriptElement.prototypeoderblocking.supports('render'). Browser ohne Unterstützung ignorieren das Attribut einfach. - Nur im Kopfbereich und nur früh wirksam: Render-Blocking greift nur, solange der Browser noch render-blockierende Elemente zulässt. Das ist der Fall, bis der Parser
<body>erreicht. Wird ein Skript später dynamisch eingefügt oder das Token später gesetzt, blockiert es das erste Rendern nicht mehr. - Performance: Jedes render-blockierende Skript verzögert First Contentful Paint und Largest Contentful Paint. Setze
rendernur für kleine, wirklich nötige Skripte ein. Ein langsamer Server eines Drittanbieters kann sonst die ganze Seite aufhalten. - Klassische Skripte ohne
async/deferim<head>blockieren das Rendern ohnehin schon, weil der Parser auf sie wartet. Wirklich sinnvoll ist das Attribut vor allem beiasync- und Modul-Skripten. - Unbekannte Tokens (z. B.
"paint") nimmt die Liste zwar auf, sie haben aber keine Wirkung.supports()liefert für siefalse.