This feature allows putting 'blocking=render' as an attribute and value to a <script> or preload/stylesheet <link> to make it explicitly render-blocking. It can be used on, for example, critical web fonts, script-inserted scripts and style sheets, async scripts and etc, to ensure that rendering does not start prematurely while critical resources are not ready. The major goal is to reduce flash of unstyled content and layout shifting.
This feature is still at a very early stage. A prototype would help the spec discussion at WHATWG.
All current browsers already have a render-blocking mechanism: after navigation, the user agent will not render any pixel to the screen before all stylesheets and synchronous scripts in <head> are loaded and evaluated. This prevents a Flash of Unstyled Contents (FOUC) and ensures critical scripts (like framework code) are executed, so that the page is usable after the first rendering cycle.
This feature extends the mechanism with a new 'blocking' attribute to allow developers to explicitly mark resources render-blocking, and therefore support more use cases (see explainer).
Initial public proposalhttps://github.com/whatwg/html/issues/7131
Search tagsrender, blocking
TAG review statusPending
Interoperability and CompatibilityGecko
: No signalWebKit
: No signalWeb developers
: No signalsOther signals
Requires code in //chrome?False
No milestones specified
Link to entry on the Chrome Platform Statushttps://chromestatus.com/feature/5452774595624960