<template for>：让 HTML 自己声明「这块要被换掉」
Chrome 150 起支持 template for 属性：用 <?start> / <?marker> 处理指令在文档里标出可替换的区间，再由流式到达的 template 去填。这篇讲它怎么用、解决什么、以及为什么它现在还不该上生产。
Chrome 150（2026 年 6 月 30 日）起支持 <template for="…">。Edge 150 在 7 月 2 日跟上，Firefox 与 Safari 尚未支持。
一句话概括：HTML 里可以标出一个「稍后会被替换」的区间，然后由流式到达的 <template> 去填它。
怎么用
文档里用处理指令标出位置：
<p>正在加载评论…</p>
<?marker name="comments">区间形式则是：
<?start name="feed">
<p>占位</p>
<?end>然后，服务端可以在响应还没结束时，继续往同一个响应流里推：
<template for="comments">
<p>第一条评论</p>
</template>浏览器收到这个 template 时，会把它替换到名为 comments 的标记点（或 start/end 区间）上。
它解决的是什么
这不是「让页面动起来」的新方法 —— 那种事有一堆方案。它解决的是一个更窄但更硬的问题：服务端流式渲染时，内容的到达顺序由数据源决定，不由页面位置决定。
典型的困境：
- 评论接口比正文快，但评论在页面下方
- 侧栏的「相关文章」要等一次搜索，而主内容早就好了
- 一个慢接口卡住了它后面的所有内容，因为 HTML 必须按顺序吐
传统流式渲染的约束是顺序：先到的东西只能写在前面。于是你要么让快的等慢的，要么把快的塞进一个以后要搬走的位置。
<template for> 把「位置」和「顺序」解耦了：内容可以在流里的任何时刻到达，只要它声明了自己属于哪个标记点。
我的判断：现在别用
三个理由：
- 只有 Chromium 支持。Firefox 与 Safari 都还没有（Firefox 有 bug 2053472，说明他们知道这件事，但没有时间表）。用之前必须设计降级 —— 而一个降级后的页面，通常就是「所有内容按到达顺序堆在底部」，比不做流式还难看。
- 使用率约 0.06% 的页面加载。这个数字说明它刚落地，生态里没有现成的模式、没有调试工具、没有踩坑经验。你现在踩的坑，都得自己挖。
- 服务端要配合。它需要你的框架（或者你手写的代码）能持续往响应里推片段，并且知道每个片段的标记名。这不是加一个属性就能得到的能力。
什么时候值得留意
如果你的场景同时满足这几条，它值得记在心上：
- 页面内容多、依赖多个数据源（典型的：新闻首页、仪表盘、带评论的文章）
- 你最慢的那个接口决定了首字节之后的等待时间
- 你愿意接受「Chromium 用户看到更好的效果，其他用户看到完整的静态版本」
第三条是关键。它天然适合渐进增强 —— 不支持时就是「内容按顺序出现」，功能不缺失，只是顺序不理想。
我更在意的一点
这个特性的形状很值得注意：它不是让 JavaScript 更强，而是把「替换一块内容」变成 HTML 自己能表达的事。
过去十几年，局部更新一直是 JavaScript 的领域 —— 拿数据、找节点、替换 innerHTML。代价是：在 JS 跑起来之前，那块内容要么不存在，要么是错的。
<template for> 把这件事放回 HTML 层：服务端直接吐出替换指令，浏览器原生执行，不需要脚本。这和 <details>、popover、<dialog> 是同一条路线 —— 把常见交互下沉到声明式标记。
这条路线的价值不在于省下几行 JS，而在于它让「没有 JavaScript 也能工作」重新成为一个可选的默认。
评论
…