Document Render Blocking

[khushalsagar]

WebKittens

@smfr

Title of the spec

HTML

URL to the spec

https://github.com/whatwg/html/issues/9332

URL to the spec's repository

No response

Issue Tracker URL

No response

Explainer URL

https://github.com/WICG/view-transitions/blob/main/document-render-blocking.md

TAG Design Review URL

https://github.com/w3ctag/design-reviews/issues/886

Mozilla standards-positions issue URL

https://github.com/mozilla/standards-positions/issues/875

WebKit Bugzilla URL

No response

Radar URL

No response

Description

The Web is designed with a model for incremental rendering. When a Document is loading, the browser can render its intermediate states before fetching all the requisite sub-resources, executing all script or fetching/parsing the complete Document. While this is great to reduce the time for first paint, there is a tradeoff between showing a jarring flash of intermediate Document state (which could be unstyled or have more CLS) vs blocking rendering on high priority sub-resources within a reasonable timeout.

The render-blocking concept helps browsers in making this tradeoff. It lets authors specify the set of stylesheets and script elements which should block rendering. For example, a stylesheet with the rules necessary to ensure a stable layout. But authors can’t specify which nodes should be added to the DOM before first render. This proposal aims to fill this gap.

[vmpstr]

Hi, please note that we're proposing the following solution: https://github.com/WICG/view-transitions/blob/main/document-render-blocking.md#blocking-element-id

This is in a spec PR here: https://github.com/whatwg/html/pull/9970

[vmpstr]

FYI, Chromium is considering shipping this feature in the near future. Please let me know if there are any concerns with the proposal