HTML模板无生命周期，节点需手动管理挂载与卸载；innerHTML重写会丢失状态，应使用template.cloneNode(true)并批量操作；需用dataset.uid+Map缓存资源，keep-alive复用须避免DOM增删。
HTML 模板本身没有生命周期——innerHTML、template.innerHTML 或 document.createElement('div') 生成的节点，只是静态结构，不自动绑定挂载/卸载逻辑。真正在意“生命周期”的，是你对这些节点的使用方式：何时插入、何时更新、何时移除、是否复用。
为什么直接操作 innerHTML 会丢失状态
每次执行 container.innerHTML = templateString，浏览器会销毁旧子树、重建新 DOM 节点。所有已绑定的事件监听器、requestAnimationFrame ID、Canvas 上下文、WebGL 纹理、定时器引用全部丢失，且不可恢复。
- 常见错误现象：
button.addEventListener('click', handler)后又重写innerHTML，点击无响应 - 滚动列表每帧都
el.innerHTML = genItem(item)→ 内存抖动 + 事件泄漏 + 输入框失焦 - Canvas 动画在模板刷新后黑屏，因为
getContext('2d')返回的新上下文未重绘
用 template + content.cloneNode(true) 控制节点创建时机
比 innerHTML 更可控：避免字符串解析开销，保留原始结构语义，且可提前绑定事件或初始化资源。
- 必须用
document.importNode(template.content, true)或template.content.cloneNode(true)复制，不能直接appendChild(template.content)（会移动而非复制） - 克隆后立即操作：设置
dataset.id、填充textContent、赋值src、调用canvas.getContext() - 不要在克隆后立刻
appendChild；先完成初始化，再批量插入，减少回流
<template id="item-tpl">
<div class="item" data-id="">
<img class="avatar">
<span class="name"></span>
</div>
</template>
// 使用时
const tpl = document.getElementById('item-tpl');
const frag = document.createDocumentFragment();
for (const item of items) {
const node = tpl.content.cloneNode(true);
node.querySelector('.avatar').src = item.avatar;
node.querySelector('.name').textContent = item.name;
node.querySelector('.item').dataset.id = item.id;
frag.appendChild(node);
}
container.appendChild(frag);
手动管理“挂载”与“卸载”语义
没有框架帮你触发 mounted 或 unmounted，你得自己定义什么算“挂载成功”、什么算“该清理”。
立即学习“前端免费学习笔记（深入）”；
- “挂载”时机 = 节点被
appendChild到有效父容器且node.isConnected === true - “卸载”不是
removeChild那一刻才开始，而是你决定它不再需要时就该清理：暂停动画、移除监听、cancelAnimationFrame、webglContext?.loseContext() - 关键防护：给每个动态节点加唯一
dataset.uid，用Map缓存其关联资源（如Map.get(el.dataset.uid)?.dispose()） - 避免依赖
disconnectedCallback—— 它不保证执行，且无法捕获innerHTML = ''这类暴力清空
keep-alive 式复用必须绕过 DOM 增删
想实现类似 Vue 的 <keep-alive> 效果，唯一可靠路径是：绝不调用 removeChild，只控制 display 和数据字段。
- 预建一批节点（比如 20 个），存进
Map，key 是业务 ID，value 是 DOM 节点 - 滚动或切换时，查 Map 是否存在对应节点；有则
node.style.display = 'block'并更新textContent/dataset/src；无则新建并缓存 - 滚出视口时设
node.style.display = 'none'，而非removeChild - 结构必须固定：class 名、子元素顺序、层级不能变，否则
querySelector('.avatar')可能取错位置
真正难的不是“怎么写”，而是“什么时候不该写”——比如高频渲染场景下，哪怕只改一个 textContent，也比重建整个 div 省一个数量级开销。但多数人第一反应仍是拼字符串，然后卡顿了才回头找原因。
