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

乱序 HTML 流是一种允许用户在页面完全加载之前即可查看并与之交互的模式。该模式正逐渐被引入 Web 浏览器。根据提案，当数据通过声明式 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>...<template for="results">  <li>Result Two</li>  <?marker name="results"></template>...

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

<ul id="results">  <li>Result One</li>  <li>Result Two</li>  <?marker name="results"></ul>

严格来说，为了防止跨组件注入攻击（例如，文档中其他位置的不受信任的标记劫持敏感表单或导航目标），

为了将流式处理工作流扩展到客户端脚本，该方案将这些标记原语与一套统一的静态和流式 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 等框架得以普及，尽管具体的实现方式各异，但其根本目标是一致的：防止页面中计算耗时的部分阻塞整个页面的加载。

声明式标记原语（

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