现代 Web 应用的使用场景已经远远超出了静态文档的范畴,但 HTML 长期以来只能按从上到下的顺序加载内容,这给开发者带来了不少困扰。为了解决这个问题,Chrome 团队提出了一套名为「声明式部分更新」的新 API,让 HTML 可以无序流式加载。
打破 HTML 的有序限制
传统的 HTML 加载必须按照文档顺序进行,开发者往往要等到整个页面准备好才能展示内容,或者使用大型框架以异步方式来规避这一问题。Chrome 新增的两组 API 可以让 HTML 以更灵活的「无序」方式交付。第一组是无序流式传输 API,利用处理指令(Processing Instructions)作为占位符,配合 <template for> 元素来动态替换内容。例如:
<div>
<?marker name="placeholder">
</div>
<template for="placeholder">
Here is some <em>HTML content</em>!
</template>
解析后,<template> 中的内容会替换到对应的处理指令位置。开发者还可以用 <?start> 和 <?end> 来显示加载过程中的临时内容,实现类似「Loading…替换为正式内容」的效果。
更简单的 JavaScript 接口
第二组是对现有 DOM 操作方法的扩展。新增的 streamHTMLUnsafe() 方法可以配合 Streams API 实现真正的流式传输,比如边下载边插入内容,不像以前那样必须等到整个 HTML 下载完才能渲染。API 还统一了命名规范:setHTML、before、after、replace 分别对应静态设置、在之前插入、在之后插入、替换内容,每种方法都有对应的流式版本。
实际应用场景
这套 API 适用于多种场景:孤立架构(Island Architecture)中可以让组件独立流式加载,流式传输可以按最优顺序交付 HTML 以提升首屏性能,超级菜单等大块内容可以延迟加载以加快页面可交互时间。Chrome 已提供 Polyfill,开发者可以从 Chrome 148 开始通过实验性标志测试,这些 API 也在标准化过程中。
编注:信源为 Chrome 官方博客,材料详细介绍了技术原理与使用示例,暂无其他浏览器厂商的明确表态。