乱序 HTML 流技术从 JavaScript 框架转移到浏览器中

- 2026-10-09北京 - 本文字数：1488 字

阅读完需：约 5 分钟

乱序 HTML 流使浏览器能在页面加载中动态填充占位符，Chrome 150 已落地支持，Safari 与 Firefox 计划跟进。

支持通过 <template for="id"> 声明插入点，服务端流式返回匹配 <script type="text/html" data-for="id"> 内容即可自动挂载。

无需 JavaScript 驱动，纯声明式、渐进增强，兼容现有 SSR 架构。

适合 Web 平台工程师、SSR/流式渲染开发者、浏览器标准关注者阅读。

![](https://static001.infoq.cn/resource/image/37/64/37e434f4711c3ae1a35df16673da5b64.jpg?x-oss-process=image/resize,w_726)

乱序 HTML 流是一种允许用户在页面完全加载之前即可查看并与之交互的模式。该模式正逐渐被引入 [Web 浏览器](https://github.com/WICG/declarative-partial-updates)。根据提案，当数据通过声明式 HTML 或相应的 JavaScript API 传入时，浏览器会实时更新占位符的内容。Chrome 150 已经正式推出这些声明式功能，而 Safari 和 Firefox 也已经表示将予以支持。

该声明式提案通过标准

当服务器稍后以流的方式传输文档中匹配的

<ul id="results">

<?start name="results">

  Loading…

<?end>

</ul>

<!-- Streamed later in the HTTP response -->

<template for="results">

<li>Result One</li>

  <?marker name="results">

</template>

...

  <li>Result Two</li>

<?marker name="results">

</template>

...
```

</div>复制代码

</article></div>在解析并处理完模板 HTML 之后，页面的最终 HTML 代码如下：

```
<ul id="results">

<li>Result One</li>

  <li>Result Two</li>

<?marker name="results">

</ul>


复制代码

严格来说，为了防止跨组件注入攻击（例如，文档中其他位置的不受信任的标记劫持敏感表单或导航目标），<template for=""> 只能修补位于其直接父元素内（即其直接同级元素及其子元素）的处理指令（以 标签之下，那么该模板将获得全局文档作用域，这样延迟更新就可以作用于 标签内部或嵌套在结构容器中的元素。</template>

为了将流式处理工作流扩展到客户端脚本，该方案将这些标记原语与一套统一的静态和流式 DOM 插入方法进行了结合。该规范定义了一组可预测的操作矩阵：setHTML、replaceWithHTML、beforeHTML、prependHTML、appendHTML 和 afterHTML，以及相应的流式处理方法（streamHTML、streamAppendHTML 等）和 \*Unsafe 变体。例如，调用 streamHTMLUnsafe() 会返回一个 WritableStream，将传入的块数据增量地传输到内部的 HTML 片段解析器中。Fetch API 通过辅助方法 response.textStream() 对此进行了补充：

// 将动态 HTML 片段直接以流的方式传输到目标容器中

const feedContainer = document.querySelector("#feed-container");

const response = await fetch("/api/feed-stream");

// 将 UTF-8 文本直接传递到浏览器的片段解析器中

await response.textStream().pipeTo(

feedContainer.streamHTMLUnsafe({ runScripts: false })

);
```

复制代码

通过将乱序交付和渲染功能内化到浏览器引擎中，该提案对长期以来前端框架以不同方式实现的渲染技术进行了标准化。这些技术最初由 Facebook 的 BigPipe 于 2009 年率先提出，随后通过 React（搭配 Suspense 流式传输）和 Next.js 等框架得以普及，尽管具体的实现方式各异，但其根本目标是一致的：防止页面中计算耗时的部分阻塞整个页面的加载。

声明式标记原语（<template for=""> 和处理指令目标）已经被纳入 [WHATWG HTML Living Standard](https://github.com/whatwg/html)，Chrome 和 Edge 150 已经提供了初步支持，textStream() 功能则随 151 版本推出；而配套的 JavaScript DOM 流式处理方法则继续通过单独的标准化流程推进。[WebKit 已经表明了支持该特性的积极立场](https://github.com/WebKit/standards-positions/issues/628)，[Mozilla 也已经释放出接纳该方案的积极意向](https://github.com/mozilla/standards-positions/issues/1369)。</template>

原文链接：<https://www.infoq.com/news/2026/09/native-deferred-html-streaming/>

乱序 HTML 流技术从 JavaScript 框架转移到浏览器中

相关推荐