无序 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 片段解析器。 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 流)和 Next.js 等框架而普及,各种方法都有相同的目标:防止页面计算的缓慢部分阻塞整个页面。
声明性标记原语 ( 和处理指南目标)已纳入 WHATWG HTML Living 标准,并在 Chrome 和 Edge 150 中首次提供支持 textStream() 在版本 151 中,JavaScript DOM 流方法继续经历单独的标准化过程。 WebKit 已经发布了积极的标准立场,Mozilla 也表现出了积极的兴趣。