cloneNode() 深拷贝后 script 不执行？
直接 cloneNode(true) 复制含 <script></script> 的模板节点，脚本不会自动运行——这是最常被误以为“克隆失败”的地方。浏览器规范明确要求：克隆出的 <script></script> 元素默认不执行，无论是否设了 defer 或 async。
真正能触发执行的只有两种方式：
- 手动调用
eval()（不推荐，有 CSP 和安全风险） - 把克隆后的
<script></script>插入文档流（如 append 到document.body），且该<script></script>是内联脚本（无src）
注意：带 src 的外链脚本即使插入 DOM 也不会二次加载——浏览器会跳过已解析过的相同 URL。
template.content 为什么不能直接 cloneNode？
<template></template> 的 content 属性返回的是 DocumentFragment，它不是元素节点，没有 cloneNode() 方法。常见错误是写成 template.content.cloneNode(true)，直接报 TypeError: template.content.cloneNode is not a function。
立即学习“前端免费学习笔记（深入）”；
正确做法是先从 content 中取子节点再克隆：
const fragment = template.content; const clone = document.importNode(fragment, true); // ✅ 正确 // 或逐个克隆子节点（适合只取部分） const clone = document.adoptNode(fragment.firstChild.cloneNode(true));
document.importNode() 是专为跨文档（包括 DocumentFragment）复制设计的 API，比手动遍历更可靠。
DocumentFragment 克隆后插入多次失效？
DocumentFragment 是“一次性容器”：一旦被 appendChild() 或 append() 插入到真实 DOM，它内部节点就被移走，fragment 变空。再拿它去插入第二次，什么都不会发生。
典型误用：
const frag = template.content; el1.append(frag); // 第一次 OK el2.append(frag); // 第二次 ❌ frag 已空
解决方法只有两个：
- 每次用前重新调用
document.importNode(template.content, true) - 缓存一个“干净副本”，比如
const cleanFrag = document.importNode(template.content, true)，然后每次克隆这个副本
别试图用 frag.cloneNode(true)——它不工作，因为 DocumentFragment 本身不支持 cloneNode。
性能对比：importNode vs innerHTML + createElement？
对简单结构，innerHTML 看似快，但隐患多：XSS 风险、事件绑定丢失、HTML 解析开销不可控；而 document.importNode() 是原生 DOM 节点复用，零解析、零字符串拼接。
实测中，当模板含 5+ 个嵌套元素或带 data- 属性时，importNode 稳定快 20%~40%；若模板含 <input> 或 <select></select>，innerHTML 还会重置用户输入状态（即使没插入）。
关键提醒：importNode 不会保留原 <template></template> 中的 JS 引用或闭包，所有事件监听必须在克隆后重新绑定——这点常被忽略，导致“节点有了，点击没反应”。
