Out-of-Order HTML Streaming Moves from JS Frameworks into the Browser

Out-of-order HTML streaming, a technique that enables users to engage with a webpage before its complete loading, is now being incorporated directly into web browsers. The proposal outlines the browser's ability to replace placeholders with data as it arrives through declarative HTML or JavaScript APIs. Chrome 150 has implemented the declarative features, while Safari and Firefox are expected to follow suit.

The declarative proposal introduces out-of-order streaming using a new "template" element with a "for" attribute. Developers can designate single insertion points or surround temporary fallback content. When a matching template arrives later in the document, the HTML parser identifies the identifier, eliminates the placeholder markers and any intermediate fallback nodes, and inserts the template's content into the designated DOM position.

Developers can also embed processing instructions within templates to enable multiple updates. After the template HTML is parsed and processed, the resulting HTML on the page reflects the changes. To enhance security, a template for can only patch processing instructions within its immediate parent element, preventing cross-component injection attacks.

The proposal also provides a set of static and streaming DOM insertion methods, including setHTML, replaceWithHTML, beforeHTML, prependHTML, appendHTML, afterHTML, and their streaming counterparts, along with *Unsafe variants. These methods allow for predictable DOM manipulation. The Fetch API supports this with the response.textStream() helper, enabling incremental piping of incoming chunks into an internal HTML fragment parser.

The declarative markup primitives have been integrated into the WHATWG HTML Living Standard, with initial support in Chrome and Edge 150, and the streaming methods are still undergoing separate standardization. WebKit and Mozilla have expressed positive attitudes towards the proposal.