Document Render Blocking

[hvanops]

Description

This feature enables authors to block rendering of a Document until the critical content has been parsed, ensuring a consistent first paint across all browsers. Without this feature, the first paint's state depends on the heuristics for parser yielding which can vary across browsers.

This is particularly important for View Transitions, where the parsed DOM state on the first frame can drastically change the transition created.

Note that this feature specifically implements a <link rel=expect href="#id"> syntax that allows a link element to reference another expected element on the page. The rendering is then blocked until the expected element is fully parsed. This supersedes previous implementation of the html attribute that allows the whole document to be render-blocked.

Specification

https://html.spec.whatwg.org/multipage/links.html#link-type-expect

Additional Signals

Standards Positions

• Gecko Positive - HTML: Document Render-Blocking mozilla/standards-positions#875
• WebKit Positive* - Document Render Blocking WebKit/standards-positions#245 *they didn’t put a positive position officially but they already implemented it)

Tests

• https://wpt.fyi/results/html/dom/render-blocking?label=master&label=experimental&aligned&q=element-render-blocking

Additional Signals

• [View Transitions] Extend render-blocking to support Document · Issue #9332 · whatwg/html · GitHub has lots of discussion on this issue from various developers
• Article on render blocking, and why it should be used for cross-document view transitions (Render-blocking on purpose)
• Dave Rupert showed strong positive signals on this as a prerequisite for view transitions: https://daverupert.com/2023/05/getting-started-view-transitions/