Declarative partial updates

声明式局部更新

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. 尽管 HTML 取得了长足进步，但它仍然以自上而下的顺序进行交付，几乎不考虑内容何时就绪或用户何时需要消费。CSS 虽然允许改变内容的视觉顺序，但往往会带来显著的无障碍（Accessibility）副作用。JavaScript 虽然可以通过各种 API 操作 DOM 来在一定程度上摆脱这种限制，但通常需要冗长的语法，或者通过构建 DOM 树来插入 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. 鉴于 Web 的客户端-服务器架构特性，性能至关重要。然而，为了规避 HTML 这种顺序交付的特性，开发者往往会做出次优选择，从而拖慢了性能。这包括等待整个页面就绪，或者使用沉重的框架以异步方式交付组件。JavaScript 框架的流行表明，Web 开发者更倾向于基于组件的模型，而不是 Web 起源时那种僵化的文档思维模型。

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. Chrome 团队一直在思考这一问题，并以“声明式局部更新”（Declarative Partial Updates）为名，为 Web 平台开发了新的功能。两套全新的 API 使得以非线性方式交付 HTML 变得更加容易，无论是通过 HTML 文档本身的乱序交付，还是通过新的 JavaScript API 更轻松地将 HTML 动态插入到现有文档中。

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. 这些功能已从 Chrome 148 版本开始供开发者测试，只需开启 chrome://flags/#enable-experimental-web-platform-features 标志即可。此外，Polyfill 也已就绪，即使在尚未支持这些 API 的浏览器中，你也可以立即使用它们。这些 Web 平台的新增功能正在标准化过程中，并获得了其他浏览器厂商和标准化组织的积极反馈。相关标准正在更新，以纳入这些新 API。

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. 第一组变更是一套全新的乱序流式传输 API，它使用了 HTML 的 <template> 元素和处理指令占位符。

Processing instructions have existed in XML for a long time, but have been treated as comments in HTML and ignored. This new API changes that and brings processing instructions to HTML. When the browser sees the <?marker name="placeholder"> processing instructions, it doesn’t do anything straight away—much like before—but they can be referenced later. The <template> element looks up the corresponding processing instructions with a name attribute and replaces the content. 处理指令在 XML 中早已存在，但在 HTML 中一直被视为注释并被忽略。这一新 API 改变了现状，将处理指令引入了 HTML。当浏览器看到 <?marker name="placeholder"> 处理指令时，它不会立即执行任何操作（与之前一样），但这些指令可以在稍后被引用。<template> 元素会查找具有相应名称属性的处理指令，并替换其内容。

As well as the <?marker> attribute for replacements, there are also <?start> and <?end> range markers which allow for temporary placeholder content to be shown before the template is processed. 除了用于替换的 <?marker> 属性外，还有 <?start> 和 <?end> 范围标记，允许在模板处理之前显示临时的占位符内容。

Use cases

应用场景

There are many use cases for this out-of-order patching HTML when coupled with streaming HTML: 当这种乱序 HTML 修补技术与流式 HTML 结合使用时，有许多应用场景：

• Island architecture: A common pattern popularized by frameworks like Astro, the island architecture where components are hydrated independently on top of static HTML. The <template for> API lets static content be handled in a similar fashion directly in HTML. 孤岛架构（Island architecture）： 这是由 Astro 等框架推广的一种常见模式，即在静态 HTML 之上独立激活（Hydrate）组件。<template for> API 允许直接在 HTML 中以类似方式处理静态内容。
• Delivery content when it is ready: Thanks to this island architecture, content can be streamed when it is ready rather than held back for content that requires extra processing, for example, a database lookup. Now you can deliver the static content while waiting, and then plug in the more expensive content at the end of the HTML stream. 内容就绪时交付： 得益于这种孤岛架构，内容可以在就绪时进行流式传输，而不必为了等待需要额外处理（例如数据库查询）的内容而被阻塞。现在，你可以在等待的同时交付静态内容，然后在 HTML 流的末尾插入那些开销较大的内容。