无序 HTML 流是一种允许用户在页面完全加载之前查看页面并与之交互的模型,它正在进入 Web 浏览器。根据该提案,浏览器将在数据通过声明性 HTML 或匹配的 JavaScript API 到达时修补占位符。 Chrome 提供 150 种声明性功能,而 Safari 和 Firefox 则表示支持。
声明性提案引入了标准的无序流 元素由新 for 属性 开发人员声明单个插入点(例如 ),或包装临时后备内容(例如, Loading profile...)
当服务器传输匹配时 在文档的后面,HTML 解析器匹配标识符,删除 和 将标记以及标记和模板内容之间的任何中间后备节点插入到该 DOM 位置。开发人员还可以在模板中包含处理指令以允许多次更新:
<ul id="results">
<?start name="results">
Loading…
<?end>
ul>
<template for="results">
<li>Result Oneli>
<?marker name="results">
template>
...
<template for="results">
<li>Result Twoli>
<?marker name="results">
template>
...
模板 HTML 被解析和处理后,页面上生成的 HTML 将是:
<ul id="results">
<li>Result Oneli>
<li>Result Twoli>
<?marker name="results">
ul>
为了防止跨组件注入攻击(例如,劫持可信标记敏感表单或文档中其他位置的导航目标), 可以精确地修补处理指令(标记节点开始 delimiters) located within its immediate parent element (i.e., its direct siblings and their descendants). As an explicit specification exception, placing the template directly under grants it global document scope, allowing deferred updates to reach elements inside the tag or nested structural containers.
To extend streaming workflows to client-side scripting, the initiative pairs these markup primitives with a unified suite of static and streaming DOM insertion methods. The specification defines a predictable matrix of operations: setHTML, replaceWithHTML, beforeHTML, prependHTML, appendHTML和 afterHTML除了匹配流方法(streamHTML, streamAppendHTML等)和 *Unsafe 转变。调用 streamHTMLUnsafe()例如,返回一个 WritableStream 内部 HTML 片段逐渐将传入的块传输到解析器中。 Fetch API 完成了这个任务 response.textStream() 帮手:
const feedContainer = document.querySelector("#feed-container");
const response = await fetch("/api/feed-stream");
await response.textStream().pipeTo(
feedContainer.streamHTMLUnsafe({ runScripts: false })
);
通过将无序交付和渲染内部化到浏览器引擎中,该提案标准化了前端框架长期以来以不同方式实现的渲染方法。最初由 Facebook 的 BigPipe 于 2009 年首创,后来通过 React(带有 Suspense Streaming)和 Next.js 等框架而普及,这些不同的技术具有相同的基本目标:防止页面中计算缓慢的部分阻塞整个页面。
声明性标记基元 ( 和处理指令目标)包含在 WHATWG HTML Living Standard 中,并在 Chrome 和 Edge 150 中提供初步支持 textStream() 在版本 151 中,配套的 JavaScript DOM 流方法继续经历单独的身份验证过程。 WebKit 已发布了积极的基准排名,Mozilla 也表示了接受兴趣。









Leave a Reply