blocking HTML attribuut
3 elementen kennen dit attribuut. Klik op een tag voor de volledige uitleg van dat element.
Wat doet het blocking attribuut?
Geeft aan dat de browser het renderen van de pagina moet blokkeren totdat deze resource geladen is. Op dit moment is "render" de enige geldige waarde; vooral nuttig bij dynamisch (via script) toegevoegde stylesheets of scripts, die standaard niet render-blocking zijn.
<script src="ab-test.js" blocking="render"></script>Welke HTML-elementen kennen blocking?
<link>
Het <link>-HTML-element specificeert relaties tussen het huidige document en een externe bron. Dit element wordt het meest gebruikt om te li...
Dit attribuut geeft expliciet aan dat bepaalde bewerkingen geblokkeerd moeten worden totdat aan specifieke voorwaarden is voldaan. Het mag alleen worden gebruikt wanneer het rel-attribuut de sleutelwoorden expect of stylesheet bevat. Met rel="expect" geeft het aan dat bewerkingen geblokkeerd moeten worden totdat een specifieke DOM-node is geparseerd. Met rel="stylesheet" geeft het aan dat bewerkingen geblokkeerd moeten worden totdat een extern stylesheet en de kritieke subbronnen ervan zijn opgehaald en toegepast op het document. De bewerkingen die geblokkeerd moeten worden, moeten een door spaties gescheiden lijst zijn van de onderstaande blokkeringstokens. Momenteel is er slechts één token:
render: Het renderen van inhoud op het scherm wordt geblokkeerd.
Alleen link-elementen in de <head> van het document kunnen mogelijk het renderen blokkeren. Standaard blokkeert een link-element met rel="stylesheet" in de <head> het renderen zodra de browser het ontdekt tijdens het parseren. Als zo'n link-element dynamisch via een script wordt toegevoegd, moet je bovendien blocking = "render" instellen zodat het het renderen blokkeert.
<script>
Het <script>-element van HTML wordt gebruikt om uitvoerbare code of gegevens in te sluiten; dit wordt doorgaans gebruikt om JavaScript-code...
Dit attribuut geeft expliciet aan dat bepaalde bewerkingen geblokkeerd moeten worden totdat het script uitgevoerd is. De bewerkingen die geblokkeerd moeten worden, moeten een door spaties gescheiden lijst met blokkerende tokens zijn. Momenteel is er slechts één token:
render: Het weergeven van inhoud op het scherm wordt geblokkeerd.
Alleen script-elementen in de <head> van het document kunnen mogelijk het renderen blokkeren. Scripts zijn standaard niet render-blokkerend; als een script-element geen type="module", async of defer bevat, blokkeert het parsen, niet renderen. Als zo'n script-element dynamisch via een script toegevoegd wordt, moet u blocking = "render" instellen om het renderen ermee te blokkeren.
<style>
Het <style>-HTML-element bevat stijlinformatie voor een document, of een deel van een document. Het bevat CSS, die wordt toegepast op de inh...
Dit attribuut geeft expliciet aan dat bepaalde bewerkingen moeten worden geblokkeerd tijdens het ophalen van kritieke subresources en het toepassen van de stylesheet op het document. Met @import geïmporteerde stylesheets worden over het algemeen beschouwd als kritieke subresources, terwijl background-image en lettertypen dat niet zijn. De bewerkingen die moeten worden geblokkeerd, moeten een door spaties gescheiden lijst zijn van onderstaande blocking-tokens. Momenteel is er slechts één token:
render: Het renderen van inhoud op het scherm wordt geblokkeerd.
Alleen style-elementen in de <head> van het document kunnen mogelijk het renderen blokkeren. Standaard blokkeert een style-element in de <head> het renderen wanneer de browser het tegenkomt tijdens het parsen. Als zo'n style-element dynamisch via een script wordt toegevoegd, moet u bovendien blocking = "render" instellen om het renderen te blokkeren.