模板是惰性蓝图，零渲染开销，专为结构复用与内容可控注入设计；需合法HTML片段、禁内联事件与重复id；克隆必用cloneNode(true)，批量操作借DocumentFragment缓冲，交互宜用事件委托。
模板定义要合法且干净
- 写在
<body>内任意位置（推荐靠近使用处），用id或class标识便于获取 - 内容必须是完整、嵌套合法的 HTML 片段（如
<tr>可直接放模板里，浏览器不会强制补<table>） - 避免内联事件（如
onclick="..."），不推荐；也别放id属性——克隆后会重复，破坏唯一性
示例：
<template id="user-item">
<li class="user-list-item">
<img class="user-avatar" src="" alt="">
<span class="user-name"></span>
<button type="button" class="user-action">关注</button>
</li>
</template>克隆与注入必须走 content.cloneNode(true)
-
template.content是只读的DocumentFragment，不能直接插入 DOM - 必须调用
.cloneNode(true)得到可操作副本（深拷贝，含所有子节点和属性） - 不要用
innerHTML拼接或createElement逐个建——前者有解析开销，后者创建成本高
正确写法：
const tmpl = document.getElementById('user-item');
const frag = document.createDocumentFragment();
for (const user of userData) {
const item = tmpl.content.cloneNode(true);
item.querySelector('.user-name').textContent = user.name;
item.querySelector('.user-avatar').src = user.avatar;
item.querySelector('.user-action').dataset.userId = user.id;
frag.appendChild(item);
}
listEl.appendChild(frag); // 仅一次真实 DOM 插入批量操作靠 DocumentFragment 缓冲
- 每次
.appendChild()触发重排重绘，100 次插入 = 100 次开销 - 先把所有克隆节点塞进
DocumentFragment，再一次性追加到目标容器 - 注意：
frag插入后自动清空，不可复用；如需多次插入，得重新克隆或缓存克隆结果
交互逻辑用事件委托替代逐个绑定
- 克隆节点没有继承原模板的 JS 监听器（
addEventListener绑定的不会复制） - 若每个项都有“关注”按钮，不要给每个克隆体
.addEventListener—— 性能差、内存泄漏风险高 - 改为在父容器上监听，利用事件冒泡 +
event.target.matches()判断来源
例如：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
listEl.addEventListener('click', e => {
if (e.target.matches('.user-action')) {
const userId = e.target.dataset.userId;
followUser(userId);
}
});不复杂但容易忽略
立即学习“前端免费学习笔记（深入）”；
