不能靠 removechild() + createelement() 循环处理滚动列表，因为会主动触发重排重绘、丢失事件监听器、中断定时器、导致焦点错乱，且 disconnectedcallback 不保证执行，节点复用必须基于稳定 dataset.id 和只更新可变字段的容器化策略。
为什么不能靠 removeChild() + createElement() 循环处理滚动列表
每帧都 removeChild() 再 createElement()，等于主动触发浏览器重排（reflow）+ 重绘（repaint）+ 事件监听器丢失 + 定时器中断。低端设备上，200 节点每秒滚动 10 次，等效每秒销毁/重建 2000 个节点，layout 时间飙升 3–5 倍，光标、焦点、selection 全部错乱。
更隐蔽的问题是：disconnectedCallback 不保证执行——页面后台冻结、崩溃、刷新时它根本不会被调用；connectedCallback 只在首次挂载触发，重复 appendChild() 已存在节点不会再次进入。指望 Web Components 生命周期自动回收，就是把大屏性能交给运气。
- 滚动中反复读取
getBoundingClientRect()或offsetTop会强制同步回流 -
innerHTML = ''清空会销毁所有子节点及绑定事件，无法恢复 - 用数组缓存节点易因索引漂移导致数据与 DOM 错位（比如 splice 删除中间项后后续索引全乱）
用 Map + dataset.id 实现安全节点池的关键约束
核心不是“存节点”，而是“存住可复写的容器”。每个节点必须带唯一且稳定的 dataset.id，且结构初始化即固化：class 名、子元素 class 名、插槽位置都不能在复用时增删。
示例中 recycleNode() 只设 style.display = 'none'，不 removeChild() —— 这样事件监听器还在，Canvas 上下文没丢，focus 状态可保留。复用时只更新 textContent、dataset、src 等可变字段，绝不碰 innerHTML 或子节点树。
- 缓存前检查
node.dataset.id && !nodePool.has(node.dataset.id)，避免重复存入同一节点 - 复用时先
nodePool.delete(id)，再返回节点，防止多线程或异步场景下被重复取出 - 所有节点初始创建时就要写死
dataset.id，不能靠索引动态生成（滚动中索引会变）
编辑器类场景下必须坚持 position: absolute + 固定行高 + 真实节点复用
contenteditable 场景下，虚拟滚动若用 transform: translateY 位移整块内容，会导致 getSelection().getRangeAt(0) 返回的坐标失准，光标跳顶、回车错位、粘贴截断都是必然结果。
正确做法是外层 position: relative，占位 <div class="spacer"> 高度撑满（<code>height: ${totalItems * itemHeight}px），真实内容区用 position: absolute; top: ${startIndex * itemHeight}px 定位。节点池预热 20–30 个 <div contenteditable="true">，每次滚动只调用 <code>contentEl.replaceChildren(nodePool.slice(start, end)) 批量替换，不销毁、不解绑、不重建。
- 固定行高不可妥协：动态测高在滚动中触发 layout thrashing，font-family 切换、图片加载完成都会让预估失效
-
replaceChildren()比innerHTML = ''+ 逐个appendChild()更安全，能自动清理旧事件监听器 - 每次复用前必须清空
textContent和innerHTML，否则残留内容会在下次显示时意外出现
如何验证 DOM 是否真被回收而不是 Detached 泄漏
打开 DevTools → Memory 面板 → Record allocation timeline，反复滚动并触发节点复用逻辑。若 JS Heap 持续爬升、手动点击垃圾桶图标（Collect garbage）后也不回落，说明有泄漏。
拍堆快照比对：先拍基线，操作后强制 GC，再拍一张，筛选 Objects allocated between snapshots，重点看 HTMLDivElement、Closure、EventListener 类型是否数量恒定增长。若存在大量状态为 Detached DOM tree 的节点，说明 JS 仍持有引用（比如全局 cache 变量没置 null，或闭包里闭包了旧节点）。
- 在 Elements 面板右键目标节点 → Break on > subtree modifications，触发移除操作后断点，看调用栈里哪个变量还抓着它
- 运行
getEventListeners(document.querySelector('.item'))，若返回数组长度 > 1，说明同一元素被重复绑定且未解绑 - 执行
console.dir(document.querySelector('#list'))，检查是否存在__vue或__reactFiber属性——有则表明框架组件未卸载，DOM 被内部引用锁住
真正难的不是写个 nodePool.set()，而是让每个节点从诞生起就只承担“容器”角色：结构不变、事件按需绑定、内容只覆盖不重建。一旦开始在复用逻辑里做 el.appendChild() 或 el.classList.add()，池就破了。
