不能直接 removechild() 后重建节点，因为会销毁事件、定时器、canvas 上下文等资源，且 connectedcallback 不重触发、disconnectedcallback 不可靠；应使用 map 节点池复用节点，仅隐藏/显示并更新可变字段。
为什么不能直接 removeChild() 后重建节点
大屏或长列表无限滚动时，每页加载几十个 <li> 或卡片，若每次用 removeChild() + createElement()，会立刻销毁节点绑定的事件、定时器、Canvas 上下文、第三方库实例（如 Chart.js），且浏览器无法复用样式计算结果。更严重的是：connectedCallback 只在首次挂载触发，滚动中 appendChild() 已挂载过的节点不会再次调用它；disconnectedCallback 在页面后台、崩溃、刷新时根本不会执行——你根本不能靠它清理资源。
- 低端设备上，200 节点/秒的创建销毁节奏，layout 时间飙升 3–5 倍
- 用户快速滚动时，反复触发回流 + 事件重绑 + 内存抖动，UI 明显卡顿
- Vue/React 组件被暴力销毁，表单输入、折叠状态全丢
用 Map 实现安全节点池：结构必须固定、ID 必须唯一
核心不是“缓存 DOM”，而是把节点当“可擦写的白板”：不销毁，只隐藏 + 复写内容。关键约束有两个——结构固定、ID 唯一。
- 所有节点初始化时必须带
dataset.id，且值全局唯一（比如后端返回的item.id），不能靠 index 或临时生成 - 节点 HTML 结构必须写死：固定 class 名、子元素 class 名、DOM 层级深度；禁止在复用时
appendChild()或removeChild()子节点 - 缓存用
Map（而非数组），避免索引漂移导致数据错位；nodePool.set(el.dataset.id, el)存入时，el.style.display = 'none'（不 detach） - 复用时先查
nodePool.get(id)，存在则el.style.display = ''，再批量更新textContent、dataset、src等可变字段
滚动进出视口时如何安全回收与激活
回收不是“删掉”，而是“退场待命”；激活不是“新建”，而是“擦写重用”。真实场景中，滚动监听本身不能只靠 window.onscroll，得结合 IntersectionObserver 和位置阈值双重判断。
- 节点即将滚出视口顶部 1000px 时，调用
recycleNode(el)：设el.style.display = 'none'，存入nodePool，不清空dataset或子内容 - 新数据来时，优先从
nodePool中取；取不到再新建，但新建后也立即塞进池子，供后续复用 - 对已复用节点，只改可变字段（
textContent、src、dataset.value），绝不调用innerHTML = ''或增删子元素 - 滚动容器需有明确高度（如
max-height: 70vh）和overflow-y: auto，否则 IntersectionObserver 观察失效
容易被忽略的边界：骨架屏、首次加载、服务端分页信号
节点池不是万能胶，它依赖结构一致性和服务端配合。一旦骨架屏和真实内容 class 不一致，或服务端没返回 hasMore 字段，池子就变成“脏数据积压区”。
- 骨架屏 DOM 结构必须和真实内容完全一致（class、层级、子元素数量），推荐用
<template></template>+cloneNode(true)初始化池子 - 首次加载不能跳过池子直插 DOM；应统一走“取池→无则新建→插入→存池”流程，保证池子冷启动
- 服务端必须返回明确终止信号，如
hasMore: false或next_cursor: null；前端仅靠data.length === 0判断会误停 - 池子要定期清理“长期未复用”的节点（比如 30 秒未命中），避免内存持续增长，但清理前必须确保其事件/定时器已手动清除
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
