Intent to Prototype: 'blocking=rendering' attribute on scripts and link resources

141 views
Skip to first unread message

Xiaocheng Hu

unread,
Nov 17, 2021, 5:26:47 PMNov 17
to blink-dev

Contact emails

xiaoc...@chromium.org

Explainer

https://gist.github.com/xiaochengh/fae2b549b3d37454beeb9028a829f4bd#explainer

Specification

https://gist.github.com/xiaochengh/fae2b549b3d37454beeb9028a829f4bd

Summary

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>HTML

Motivation

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/7131

Search tags

renderblocking

TAG review



TAG review status

Pending

Risks



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?

No

Flag name



Requires code in //chrome?

False

Tracking bug

https://bugs.chromium.org/p/chromium/issues/detail?id=1271296

Estimated milestones

No milestones specified



Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5452774595624960

This intent message was generated by Chrome Platform Status.
Reply all
Reply to author
Forward
0 new messages