On Topic: blocking-Attribut am Script-Element

[Rolf B]

Hallo alle,

nachdem ich mal wieder im Wiki die Änderungen patrouilliert habe, finde ich einen Nachtrag von Robert zum Script-Element.

<script blocking="render">
...
</script>

Das blocking-Attribut gibt's am link-, style- und script-Element. Es ist eine DOMTokenList, analog zum class-Attribut, aber das einzige derzeit spezifizierte Token ist "render".

Matthias hat das gleich aufgegriffen und eine Detailseite zum Attribut verfasst, auch ein Beispiel hinzugefügt, aber wie so viele unserer Beispiele ist es nicht hilfreich. Für mich fehlt etwas Wesentliches.

Bei <link rel="stylesheet" href=".."> kann ich mir den Zweck von blocking noch vorstellen. Um einen FOUC zu vermeiden, soll das Rendering warten, bis das Stylesheet da ist.

Bei script hingegen tue ich mich schwer mit dem Anwendungsfall.

Fall 1: Das Script ist kein Modul bzw. wird nicht mit defer oder async geladen.

In diesem Fall wartet auch ohne das Attribut nicht nur das Rendering, sondern gleich der ganze Parser, bis das Script gelaufen ist. Ein blocking-Attribut ergibt keinen Sinn

Fall 2: Das Script wird mit defer geladen (defer-Attribut, type="module")

Hier dachte ich eigentlich immer, dass solche Scripte vor dem DOMContentLoaded Event ausgeführt werden und das erste Rendering erst hinter DOMContentLoaded stattfindet. D.h. blocking="render" ist hier ebenfalls wirkungslos

Fall 3: Das Script wird mit async geladen

Wenn ich das mit blocking="render" tue, dann kann ich auch gleich "defer" angeben.

Fall 4: Ich füge das Script-Element per JavaScript hinzu

Habe ich ausprobiert, aber das visuelle Verhalten schien mir mit und ohne blocking-Attribut gleich. Ich hatte allerdings keinen Testserver mit dem ich eine signifikant verzögerte Lieferung des Scripts faken konnte, ich habe lediglich per busy-loop eine Sekunde verzögert. setTimeout schien mir hier nicht die richtige Idee zu sein.

Probe 4a: Anfügen eines div zum DOM, Script-Element erzeugen, im Script das div nach Ablauf der Wartezeit umfärben

Probe 4b: Script-Element erzeugen, Im Script zu Beginn ein div zum DOM hinzufügen, nach der Warteschleife das div umfärben

Beide Proben ergaben in der Darstellung keine Unterschiede, wenn ich blocking hinzugefügt habe.

Was verstehe ich hier miss? Wo ist der sinnvolle Anwendungsfall dieses Attributs? Kann jemand eine Seite zeigen, wo blocking="render" ein konkretes Problem löst? Die Suchtreffer, die ich hierzu finde, möchten eigentlich alle das Gegenteil erreichen: Render-Blocking verhindern!

Rolf