虚拟滚动节点回收需精准控制缓冲区、禁用intersectionobserver、复用节点池、保留动画节点、对齐占位高度——缓冲区上下各5–10行，回收跳过contenteditable和过渡中节点，spacer高度须与回收逻辑严格一致。
虚拟滚动的节点回收不是“删完拉倒”，而是必须按可视区域边界精准控制——回收早了会白屏，回收晚了内存飙升，且在编辑器、动画、懒加载等场景下极易出错。
滚动监听必须节流或用 requestIdleCallback
直接监听 scroll 事件并在每帧都重算起始索引 + 渲染，会高频触发 layout（如读取 scrollTop 或 getBoundingClientRect()），导致主线程卡死。尤其在低端设备或复杂样式下，滚动延迟肉眼可见。
- 用
lodash.throttle(scrollHandler, 16)是最简单可靠的兜底方案 - 更优解是结合
requestIdleCallback：只在浏览器空闲时执行回收与挂载，避免抢占渲染帧 - 禁用
IntersectionObserver做范围判定——它不提供像素级偏移，无法替代scrollTop / itemHeight的精确映射
回收范围必须包含缓冲区，不能只留可视区
只保留当前视口内节点，滚动稍快就会出现“闪白”：新节点还没挂载，旧节点已被删，中间出现空白。真实项目中缓冲区不是可选项，而是必选项。
- 缓冲区建议设为上下各
5–10行（取决于行高和容器高度） - 计算回收起点时，用
Math.max(0, startIndex - 5)，终点用Math.min(items.length, endIndex + 5) - 若用节点池复用（如编辑器场景），缓冲区就是池子的最小保有量；销毁动作应只发生在缓冲区外
contenteditable 场景下节点不能 destroy，只能 reset
在 HTML 编辑器里，remove() 或 innerHTML = '' 会切断 selection 链路，导致光标丢失、回车错位、粘贴截断。此时“回收”本质是状态重置，而非 DOM 销毁。
- 预创建固定数量的
<div contenteditable="true"> 节点，存入池子<li>每次滚动只调用 <code>node.textContent = items[i].text和node.dataset.index = i，不替换、不删除 - 焦点管理必须绑定到池中节点本身，而非数据索引——
el.focus()要始终作用于当前正在编辑的那个真实 DOM - 禁止对池中节点使用
key或v-if控制显隐，否则 Vue/React 会误判为新节点而丢弃 focus 状态 - 加一个轻量标记：给正在过渡的节点设
data-pending-transition="true" - 回收前检查
node.hasAttribute('data-pending-transition')，跳过这类节点 - 过渡结束时用
node.addEventListener('transitionend', () => node.removeAttribute('data-pending-transition'))清理标记 - 更稳妥的做法是统一用
will-change: opacity+ CSS 动画，避免 JS 主动操作 style 触发重排
动画/过渡中的节点必须跳过回收
框架如 vue-virtual-scroller 的默认回收逻辑会在滚动帧内无差别 remove()，若某行正执行 opacity 或 transform 过渡，节点被删会导致动画突然中断、视觉闪烁。
最易被忽略的一点：回收策略和占位高度必须严格对齐。如果 spacer 的高度按 items.length * itemHeight 计算，但回收逻辑却因四舍五入误差少留了一行，滚动条拖到底部时最后几项就永远进不了视口——这种 bug 不报错、不抛异常，只安静地“消失”。
