Chrome for Developers 博客 声明性部分更新 通过集合保持井井有条 根据您的偏好保存内容并对其进行分类。 Barry Pollard X GitHub Mastodon Bluesky 主页 Noam Rosenthal X GitHub Mastodon 发布日期:2026 年 5 月 19 日 Web 早已从最初的静态、文档驱动媒体转变。现代丰富的网络应用程序被每个人出于多种原因使用,从沟通、购买、消费丰富的内容到管理我们复杂的生活。尽管 HTML 取得了诸多进步,但它仍然以自上而下的方式按顺序交付,很少考虑内容何时准备好或用户何时使用它。 CSS 允许您更改内容的顺序,但通常会带来显着的可访问性副作用。 JavaScript 允许您通过各种 API 操作 DOM,从而在一定程度上摆脱这种束缚,但这些通常需要冗长的语法或构建 DOM 树才能插入 HTML。考虑到媒体的客户端-服务器性质,性能对于 Web 来说非常重要,但通常会做出次优的选择来规避 HTML 的这种有序性质,从而降低性能。这包括等待整个页面准备好或使用重型框架以异步方式交付组件。 JavaScript 框架的流行表明 Web 开发人员更喜欢基于组件的模型,而不是 Web 起源的严格文档思维模型。 Chrome 团队一直在考虑这个问题,并一直在以声明性部分更新的名义为网络平台开发新的功能。两组新的 API 使以不太线性的方式交付 HTML 变得更加容易,无论是 HTML 文档本身无序,还是使用新的 JavaScript API 通过更简单的方法将 HTML 动态插入到现有文档中。这些已准备好供开发人员使用 chrome://flags/#enable-experimental-web-platform-features 标志从 Chrome 148 进行测试。 Polyfill 还可以让您立即使用这些新的 API,即使在尚不支持它们的浏览器中也是如此。这些网络平台的新增功能正在通过其他浏览器供应商和标准化途径的积极反馈进行标准化。相关标准正在更新以包含这些新的 API。无序流式处理 第一组更改是使用
HTML 元素和处理指令占位符的新无序流式处理 API。例如:
... 这是一些 HTML 内容! 处理指令在 XML 中早已存在,但在 HTML 中却被视为注释而被忽略。这个新的 API 改变了这一点,并将处理指令引入 HTML。当浏览器看到 处理指令时,它不会立即执行任何操作(就像以前一样),但可以稍后引用它们。 元素通过name属性查找相应的处理指令并替换内容。在这种情况下,解析后,DOM 最终为: Here is some HTML content!
除了用于替换的 属性之外,还有 和 范围标记,它们允许在处理模板之前显示临时占位符内容: 正在加载...
... 这是一些 HTML 内容! 在这种情况下,会显示 Loading...,直到看到 ,然后被新内容替换。还可以在模板中包含处理指令以允许多次更新: ... 结果一 ... 结果二 ... 这会在执行后生成以下 HTML parsed: 最后添加最终处理指令,以防以后向文档中添加更多 。演示 在此视频中,使用流式 HTML 实现了基本相册应用程序: 使用无序流式传输实现的相册演示(源) 在初始布局后,状态和照片都会流式传输到 HTML 中。用例 这种无序修补 HTML 与流式 HTML 结合使用时有很多用例:孤岛架构。一种常见的模式,由 Astro 等框架流行,岛式架构中的组件独立于静态 HTML 之上。 API 允许直接在 HTML 中以类似的方式处理静态内容。 JavaScript 框架还可以使用它来实现更具交互性的岛屿或处理组件。内容准备好后交付。得益于这种岛式架构,当我