GoKawiilBarry Pollard Noam Rosenthal
The web has long since moved on from the static, document-driven medium that it started as. Modern, rich web apps are used by everyone for many reasons, from communicating, purchasing, consuming rich content, to managing our complex lives.
HTML, despite all its advances, is still delivered in-order in a top-to-bottom fashion with little regard for when content is ready or when the user consumes it. CSS lets you change the ordering of content, but often with significant accessibility side effects. JavaScript lets you manipulate the DOM through various APIs to break free of this somewhat, but those often require verbose syntax or construction of DOM trees to plug into HTML.
Performance is incredibly important for the web, given the client-server nature of the medium but suboptimal choices are often made to circumvent this in-order nature of HTML, which slows down performance. This includes waiting until the whole page is ready or using a heavy framework to deliver components in an asynchronous manner. The popularity of JavaScript frameworks shows that web developers prefer a component-based model rather than the rigid document mental model of the web's origins.
The Chrome team has been considering this problem and has been developing new additions to the web platform under the name of Declarative Partial Updates.
Two new sets of APIs make it easier to deliver HTML in a less linear fashion, whether out-of-order in the HTML document itself or through easier ways to dynamically insert HTML into existing documents using new JavaScript APIs. These are ready for developer testing from Chrome 148 using the chrome://flags/#enable-experimental-web-platform-features flag. Polyfills are also available to let you use these new APIs right away, even in browsers that don't yet support them.
These additions to the web platform are being standardized with positive feedback from other browser vendors and standardization avenues. The relevant standards are in the process of being updated to include these new APIs.
Out-of-order streaming
The first set of changes are new out-of-order streaming APIs using the <template> HTML element and processing instruction placeholders. For example:
<div> <?marker name="placeholder"> </div> ... <template for="placeholder"> Here is some <em>HTML content</em>! </template>
... continue reading