template.content.cloneNode(true) 是唯一安全克隆方式，因 template.content 是 DocumentFragment，只能有一个父节点；浅克隆或直接 append 会导致后续渲染异常，如数据重复、光标丢失、状态归零。
template.content.cloneNode(true) 是唯一安全克隆方式
直接 appendChild(template.content) 看似省事，但第二次调用时 template.content 就为空了——因为它是 DocumentFragment，只能有一个父节点。这不是 bug，是浏览器规范行为。
必须用 cloneNode(true) 深克隆，否则后续渲染静默失败：列表项全显示相同数据、input 光标丢失、选中状态归零，都是浅克隆或没克隆的典型症状。
-
cloneNode(false)只克隆顶层元素，子节点全丢，完全不可用 -
cloneNode(true)复制全部子节点、属性、文本和表单值，保留可编辑状态 - 跨
iframe场景下更推荐document.importNode(template.content, true)，兼容性略好
填值必须绕开 innerHTML，优先用 textContent 和 value
在克隆后的节点上用 innerHTML 填用户数据，等于主动引入 XSS 风险，还会清空已绑定的事件监听器（比如模板里写好的 onclick 或手动加的 addEventListener）。
- 纯文本内容 →
el.querySelector('.title').textContent = data.title - 表单控件 →
el.querySelector('input').value = data.inputValue（不是textContent） - 需渲染富文本？先对输入做 HTML 转义（如
text.replace(/&/g, '&')），再塞进innerHTML
template 内的 <script></script> 或 <style></style> 克隆后依然不执行、不生效，别指望“活”过来。
立即学习“前端免费学习笔记（深入）”；
批量插入必须走 DocumentFragment 中转
循环里每轮都 container.appendChild(cloned)，浏览器就得反复触发重排重绘。100 条就可能卡顿，500 条基本卡死——这不是理论瓶颈，是真实 DOM 操作代价。
- 必须用
DocumentFragment作中转容器：const frag = document.createDocumentFragment() - 循环体内：克隆 → 填值 →
frag.appendChild(cloned) - 循环结束后，只调一次
container.appendChild(frag) -
frag是轻量中间对象，不在主 DOM 树中，querySelector查不到它，也不触发布局
template 本身不缓存节点，复用靠自己管生命周期
<template></template> 只是惰性容器，不执行脚本、不加载资源、不触发样式计算。它不自动缓存节点，也不预编译结构。“高性能复用”的关键不在标签本身，而在你如何管理克隆后的节点。
直接反复调用 template.content.cloneNode(true) 安全但非最优：每次新建所有节点，无内存复用。若需真复用（如虚拟滚动回收），就得自己维护节点池，显式 detach、reset、reuse —— 这部分逻辑浏览器不会替你做。
最容易被忽略的是 hydration 边界：如果页面已 SSR 输出了部分结构，又用 <template></template> 动态补，得小心重复挂载或事件绑定冲突。
