DOM节点复用是开发者手动实现的资源管理策略，通过缓存移出视口的节点（如用Map存储）、仅更新其dataset/文本等内容并重挂载，避免频繁创建删除导致的高成本回流与事件丢失。
DOM节点复用不是HTML内置功能，而是手动实现的资源管理策略
HTML本身没有“DOM回收”概念，浏览器也不会自动把滚出视口的节点存起来等你重用。所谓“复用移出视口的DOM节点”，本质是开发者主动拦截滚动行为，把即将不可见的节点缓存到内存（或DocumentFragment），等新数据来时，不创建新节点，而是修改旧节点属性并重新挂载。这能避开频繁createElement和appendChild带来的回流开销。
为什么直接删+重建会触发高成本回流
每次调用removeChild再appendChild新节点，浏览器必须：① 从渲染树中移除旧结构；② 构建新DOM子树；③ 重新计算布局（回流）；④ 重绘。尤其在列表滚动场景下，每帧都可能触发多次，卡顿明显。
- 避免在滚动监听里反复读取
offsetTop、getBoundingClientRect()——这些会强制同步回流 - 不要用
innerHTML = ...批量替换整块内容，它会销毁所有子节点及其事件绑定 - 真实DOM节点一旦被
removeChild，其绑定的addEventListener就永久失效，无法靠“恢复”回来
用Map缓存节点 + dataset标记状态，实现安全复用
核心是把节点当“容器”而非“内容”。每个节点保留不变的结构（如固定class、插槽位置），只更新dataset、textContent或src等可变字段。缓存用Map比数组更可靠，避免索引错位。
示例逻辑：
立即学习“前端免费学习笔记（深入）”；
const nodePool = new Map(); // key: 'item-001', value: HTMLDivElement
function recycleNode(node) {
const id = node.dataset.id;
if (id && !nodePool.has(id)) {
node.style.display = 'none'; // 不detach，避免事件丢失
nodePool.set(id, node);
}
}
function acquireNode(id, data) {
let node = nodePool.get(id);
if (node) {
node.style.display = '';
node.querySelector('.title').textContent = data.title;
node.querySelector('.desc').textContent = data.desc;
node.dataset.updatedAt = Date.now();
nodePool.delete(id);
} else {
node = document.createElement('div');
node.className = 'list-item';
node.dataset.id = id;
node.innerHTML = `<div class="title"></div><div class="desc"></div>`;
}
return node;
}
- 不调用
node.remove()或parentNode.removeChild()，改用display: none临时隐藏，保活事件监听器 - 用
dataset.id而非node.id做键名，避免全局ID冲突 - 首次创建节点时用
innerHTML没问题，但后续复用必须走querySelector+ 属性赋值，确保可控
滚动临界点判断要防抖，且避开layout thrashing
监听scroll事件直接查getBoundingClientRect()是典型layout thrashing陷阱——每帧都强制回流。必须用IntersectionObserver替代。
-
IntersectionObserver是浏览器原生优化过的，不触发回流，回调里拿到的isIntersecting就是是否在视口内 - 观察阈值设为
{ threshold: [0, 0.1] }，让节点提前10%高度进入/离开视口，留出复用缓冲区 - 不要在observer回调里直接操作DOM，先存入队列，用
requestIdleCallback或setTimeout(..., 0)批量处理
真正难的是状态一致性：比如用户快速滚动时，一个节点可能被acquire又马上recycle，中间数据还没渲染完。这种竞态必须靠dataset.version或时间戳比对来丢弃过期更新。
