cloneNode(true)是唯一能撑住大规模注水的操作，它完整复制DOM树（含表单值、选中状态等），配合DocumentFragment批量插入可避免重排重绘，而直接appendChild或innerHTML会引发数据错乱、性能断崖及XSS风险。
template.content.cloneNode(true) 是唯一能撑住大规模注水的操作
直接 appendChild(template.content) 在第一次渲染后，template.content 就空了——因为它是 DocumentFragment，只能有一个父节点。第二次调用会静默失败，列表项全丢、数据错乱、光标消失，但控制台不报错，极难定位。
必须用 cloneNode(true)：它复制完整 DOM 树（含表单值、选中状态、文本节点），且不影响原模板后续复用。传 false 只克隆顶层元素，子节点全丢，根本没法用。
- 跨 iframe 场景下优先用
document.importNode(template.content, true)，兼容性更稳 - 克隆后若含
<input>，记得重设id和name，否则label[for]或表单提交会串号 - 不要在循环里反复用同一个克隆体去填不同数据——所有项最后都显示最后一轮的数据
批量插入不走 DocumentFragment 就是自找卡顿
100 条数据每条都 container.appendChild(cloned)，浏览器就得做 100 次重排重绘；500 条基本卡死。这不是“可能慢”，是真实断崖式性能下降。
正确做法是用 DocumentFragment 中转：
立即学习“前端免费学习笔记（深入）”；
- 先
const frag = document.createDocumentFragment() - 循环内：克隆 → 填值 →
frag.appendChild(cloned) - 循环结束，只调一次
container.appendChild(frag)
frag 不在主 DOM 树里，querySelector 查不到它，也不触发样式计算或布局，性能恒定。
填值时碰 innerHTML 就等于放弃 template 的全部优势
innerHTML 往克隆体里塞用户数据，会清空已绑定事件、丢失表单光标、引入 XSS 风险——这和手拼字符串没区别，还白用了 template。
填值必须定向操作：
- 纯文本 →
el.querySelector('.title').textContent = data.title - 表单控件 →
el.querySelector('input').value = data.inputValue（不是textContent） - 富文本 → 先转义：
text.replace(/&/g, '&').replace(/, '<')，再塞进innerHTML
<script> 和 <style> 在克隆后依然不执行、不生效，别指望它们“活”过来。
渲染前得认清单条数据的临界点
即使用了 <template> + cloneNode(true) + DocumentFragment，一次性渲染 10000 条仍会卡顿——这不是写法问题，是浏览器 DOM 承载上限。
滚动场景下，真正要防的是“一次性全量注入”。该用虚拟滚动就用虚拟滚动，template 只负责单条结构的高效生成，不是万能分页器。
容易被忽略的一点：模板里若有图片，克隆后插入 DOM 才发起请求；但如果你提前把克隆体藏在内存里等很久才插入，图片加载时机就不可控——这点在长列表预加载逻辑里常被漏掉。
