直接 createElement + appendChild 在重复节点场景下变慢，因每次调用需完整 DOM 构建链路（内存分配、样式挂载、layout 检查），100 次即 100 次布局准备开销；克隆模板节点（cloneNode(false)）跳过样式解析与初始 layout 计算，仅复制结构与属性，在 Chrome/Firefox 中处理 500+ 节点快 2–4 倍，前提是使用 template 标签管理原型节点并重置内容。
为什么直接 createElement + appendChild 在重复节点场景下变慢
每次调用 document.createElement() 都要走完整 DOM 构建链路：分配内存、挂载样式树、触发 layout 前检查。100 次循环 = 100 次潜在布局准备开销，尤其在带 class、dataset 或内联样式的节点上更明显。这不是 JS 运算慢，而是浏览器底层对每个新节点的“接纳成本”太高。
克隆模板节点比反复 createElement 快多少
克隆复用已有节点（node.cloneNode(false)）跳过了样式解析和初始 layout 计算，只复制结构与属性，实测在 Chrome/Firefox 中处理 500+ 节点时快 2–4 倍。关键前提是：你有一个“原型节点”可复用。
- 必须用
cloneNode(false)：只克隆自身，不带子节点；若需深克隆（含事件监听器），得额外处理，且多数编辑器场景不需要 - 原型节点不能从真实 DOM 直接取（比如
document.querySelector('.template')），否则克隆后插入会把原节点移走——应先用document.importNode()或藏在template标签里 - 克隆后必须重置内容：
el.textContent = ''、el.innerHTML = ''、el.dataset.id = ''、el.className = 'item'，否则旧数据残留
用 <template> 标签管理 HTML 模板最稳妥
<template> 是浏览器原生支持的离屏容器，内容不会被解析、渲染或执行脚本，完美适合作为节点原型池。它比 document.createDocumentFragment() 更进一步：前者是“空画布”，后者是“已画好的底稿”。
正确用法：
立即学习“前端免费学习笔记（深入）”；
<template id="item-template">
<li class="list-item" data-type="user">
<span class="name"></span>
<span class="age"></span>
</li>
</template>
JS 中取用：
const tmpl = document.getElementById('item-template');
const frag = document.createDocumentFragment();
users.forEach(u => {
const item = tmpl.content.cloneNode(true); // true 表示深克隆
item.querySelector('.name').textContent = u.name;
item.querySelector('.age').textContent = u.age;
item.querySelector('[data-type]').dataset.id = u.id;
frag.appendChild(item);
});
listContainer.appendChild(frag);
-
tmpl.content是一个DocumentFragment，直接 clone 它比 clone 单个元素更灵活 - 不要对
tmpl本身调用cloneNode()，它不是普通元素节点，content才是可操作部分 - 避免在模板里写
onclick="handler()"：内联事件绑定无法随克隆继承，必须用addEventListener动态加
什么时候该放弃模板，改用字符串拼接
纯静态结构、无事件、无动态属性、节点数 innerHTML += str 反而更轻量——V8 对小字符串拼接做了深度优化，且免去 DOM 创建/克隆的 JS 层开销。
- 适用场景：
<option>列表、简单<span>标签堆叠、服务端预渲染后的只读展示 - 风险点：若字符串含用户输入内容，必须手动转义（
textContent不适用），否则 XSS；建议用DOMPurify.sanitize()或服务端过滤 - 别混用：同一列表中，既克隆又拼接，会导致节点类型不一致，后续 querySelector 或事件委托失效
<template> 的内容在首次解析时就完成了样式计算缓存，但如果你在运行时动态修改其内部 CSS 类名或 style 属性，那些缓存会失效——所以模板应尽量保持“只读结构”，动态逻辑全交给 JS 控制。 
