Intent to Prototype: 'blocking=rendering' attribute on scripts and link resources
Xiaocheng Hu
Contact emails
xiaoc...@chromium.orgExplainer
https://gist.github.com/xiaochengh/fae2b549b3d37454beeb9028a829f4bd#explainerSpecification
https://gist.github.com/xiaochengh/fae2b549b3d37454beeb9028a829f4bdSummary
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.
Blink component
Blink>HTMLMotivation
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 proposal
https://github.com/whatwg/html/issues/7131Search tags
render, blockingTAG review
TAG review status
PendingRisks
Interoperability and Compatibility
Gecko: No signal
WebKit: No signal
Web developers: No signals
Other signals:
Debuggability
Is this feature fully tested by web-platform-tests?
NoFlag name
Requires code in //chrome?
FalseTracking bug
https://bugs.chromium.org/p/chromium/issues/detail?id=1271296Estimated milestones
No milestones specified