Signatur
Beschreibung
Die Eigenschaft blocking von HTMLStyleElement spiegelt das HTML-Attribut blocking des <style>-Elements wider. Sie gibt eine dynamische DOMTokenList zurück: Wenn Sie Einträge hinzufügen oder entfernen, ändert sich sofort auch das Attribut im DOM, und umgekehrt.
Im Moment gibt es nur ein gültiges Token: render. Damit teilen Sie dem Browser mit, dass er mit dem ersten Rendern der Seite warten soll, bis das Stylesheet vollständig verarbeitet ist. Das gilt auch für alle Ressourcen, die per @import nachgeladen werden. So verhindern Sie ein kurzes Aufblitzen ungestylter Inhalte (FOUC).
Wichtig ist das vor allem bei per Skript eingefügten <style>-Elementen. Stilblöcke, die der Parser schon beim Einlesen im <head> findet, blockieren das Rendern ohnehin von selbst. Mit JavaScript eingefügte Elemente blockieren dagegen nur, wenn blocking="render" gesetzt ist. Die Blockierung wirkt nur, solange das Dokument noch nicht zum ersten Mal gerendert wurde.
Die Eigenschaft ist schreibgeschützt, Sie können also kein neues Objekt zuweisen. Wenn Sie ihr trotzdem einen String zuweisen, wird er an DOMTokenList.value weitergereicht (PutForwards=value). Deshalb funktioniert style.blocking = "render" genauso wie das Setzen des Attributs.
Rückgabewert
blocking-Attribut. Ist das Attribut nicht gesetzt, ist die Liste leer (length === 0). Das einzige gültige Token ist derzeit render.Beispiele
Aktuellen Wert auslesen
// HTML: <style id="kritisch" blocking="render">body { margin: 0; }</style>
const style = document.getElementById('kritisch');
console.log(style.blocking.value); // Attributwert als String
console.log(style.blocking.contains('render')); // Blockiert das Rendern?
console.log(style.blocking.length);Dynamisch eingefügtes Stylesheet render-blockierend machen
// Früh im <head> ausführen, noch vor dem ersten Rendern
const style = document.createElement('style');
// Zuerst prüfen, ob der Browser das Feature kennt
if ('blocking' in HTMLStyleElement.prototype &&
style.blocking.supports('render')) {
style.blocking.add('render');
}
style.textContent = `
@import url('/css/theme.css');
:root { color-scheme: light dark; }
`;
document.head.append(style);
console.log(style.outerHTML.startsWith('<style blocking="render">'));Token entfernen und String-Zuweisung
const style = document.querySelector('style[blocking]');
// Blockierung aufheben – das Attribut wird zu blocking=""
style.blocking.remove('render');
console.log(style.getAttribute('blocking'));
// Einen String zuweisen: wird an DOMTokenList.value weitergereicht
style.blocking = 'render';
console.log(style.getAttribute('blocking'));
console.log(style.blocking instanceof DOMTokenList);// Wichtig · Fallstricke
- Browser-Kompatibilität: Unterstützt wird die Eigenschaft nur von Chromium-basierten Browsern ab Version 105. Firefox und Safari unterstützen sie nicht, dort ergibt
style.blockingundefined. Prüfen Sie vorher mit'blocking' in HTMLStyleElement.prototypeundblocking.supports('render'), ob das Feature verfügbar ist. - Nur vor dem ersten Rendern wirksam: Wenn Sie das Token hinzufügen, nachdem die Seite schon gerendert wurde, hat das keine Wirkung mehr. Setzen Sie es also, bevor Sie das Element ins Dokument einfügen, und zwar in einem frühen Skript im
<head>. - Performance: Wenn zu viele Ressourcen das Rendern blockieren, dauert es länger, bis erste Inhalte erscheinen (First Contentful Paint / Largest Contentful Paint). Setzen Sie
rendernur für wirklich kritische Stile ein. - Unbekannte Tokens werden im Attribut zwar gespeichert, aber ignoriert.
supports()gibt für siefalsezurück. - Bei Stilblöcken, die der Parser im
<head>findet, istblocking="render"meist überflüssig, weil sie das Rendern ohnehin blockieren.