Chrome is Experimenting with ‘Declarative Partial Updates’ to Kill the Page Load Spinner
Table of Contents
Breaking the linear nature of the web
For decades, the fundamental architecture of the web has been linear. HTML is delivered in a top-to-bottom fashion; the browser reads the document, and the content appears in the order it was sent. While CSS can visually rearrange elements and JavaScript can rewrite the DOM on the fly, the underlying delivery mechanism remains rigid. To get around this, developers have leaned heavily on massive JavaScript frameworks to handle asynchronous components, often at the cost of performance and accessibility.
The Chrome team is now attempting to modernize this process with a new set of features called Declarative Partial Updates. The goal is to allow HTML to be delivered in a less linear fashion, enabling a page to stream in content out-of-order without requiring the developer to build complex client-side state management logic.
How the ‘Marker’ system works
The core of this proposal is the introduction of processing instruction placeholders. While processing instructions have existed in XML for years, HTML has largely treated them as comments and ignored them. Chrome is changing that by introducing the <?marker> syntax.
In a practical scenario, a developer can place a marker—such as <?marker name="placeholder">—inside a <div>. Later in the document, a <template> element with a corresponding for attribute can be used to fill that spot. Once the browser parses the template, it automatically injects the content into the previously defined marker.
This allows for a more fluid user experience, particularly with <?start> and <?end> range markers. These let developers show a “Loading…” state or a skeleton screen that is automatically replaced once the actual data arrives from the server. It essentially brings the logic of component-based frameworks directly into the HTML streaming process.
Beyond static templates
The utility of this system extends to dynamic lists. By nesting markers within templates, Chrome is enabling a recursive update pattern. For instance, a results list can be initialized with a marker, and each subsequent template delivered over the wire can append a new list item while maintaining a marker at the end for future entries. This creates a continuous stream of data that populates the UI in real-time as the server sends it, rather than waiting for a full JSON payload to be parsed by a JavaScript function.
This approach aims to solve the “all-or-nothing” problem inherent in current DOM injection methods. Currently, developers using innerHTML or insertAdjacentHTML usually need the entire string of HTML ready in memory before they can inject it. Declarative Partial Updates allow the browser to handle the insertion as the stream arrives, mirroring the efficiency of how the browser originally loaded the primary page.
Testing and Availability
The feature is currently available for developer testing in Chrome 148. To access it, users must enable the chrome://flags/#enable-experimental-web-platform-features flag. Because these APIs are still in the standardization phase, the Chrome team has also released a template-for-polyfill via npm, allowing developers to implement this behavior in other browsers, albeit with some limitations since polyfills cannot directly alter the browser’s native HTML parser.
While the project is still experimental, the Chrome team notes that they are receiving positive feedback from other browser vendors. If standardized, this could significantly reduce the amount of “boilerplate” JavaScript required to build modern, reactive web applications, moving the heavy lifting back to the browser engine where it is most performant.
