必须用 clonenode(true) 深克隆 template.content，否则因 documentfragment 单父节点限制导致后续渲染失败；填值禁用 innerhtml 防 xss 和事件丢失，优先用 textcontent/value；批量插入须经 documentfragment 中转以避免重排重绘卡顿。
template.content.cloneNode(true) 是唯一能复用的克隆方式
直接 appendChild(template.content) 看似省事，但第二次调用时 template.content 就为空了——这不是 bug，是 DocumentFragment 的设计限制：它只能有一个父节点。一旦被移走，原引用就失效，后续所有渲染静默失败、数据错乱、光标丢失。
必须用 cloneNode(true) 深克隆，否则表单值、input 光标位置、选中状态全丢；cloneNode(false) 只克隆顶层元素，子节点全丢，完全不可用。
-
template.innerHTML永远返回空字符串，别试 -
template.textContent返回纯文本（含换行缩进），无法定位或修改结构 - 跨 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 - 模板中含
<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> + cloneNode(true) + DocumentFragment，一次性渲染 10000 条仍会卡顿——这不是模板写法的问题，而是 DOM 节点总量和布局计算压力本身达到浏览器渲染引擎的硬边界。
真正容易被忽略的是：克隆后必须重设 id（否则 label[for]、getElementById 全部冲突），且事件监听器不会随克隆自动带过去，得手动绑定；<slot></slot> 在普通 DOM 中无效，只有挂载到 Shadow DOM 才解析——这些细节不处理，大规模列表一动就出错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
