核心是减少dom重排重绘、避免隐式内存泄漏、控制对象生命周期；用documentfragment批量操作、replacechildren替代循环删除、weakmap管理元数据、abortcontroller清理监听器、分批处理+requestidlecallback防阻塞。
核心思路是减少 DOM 重排重绘、避免隐式内存泄漏、控制对象生命周期，而不是单纯“清空”或“重建”。
用 DocumentFragment 批量操作 DOM
每次直接操作 DOM（如 appendChild 或 removeChild）都会触发重排。增删频繁时，应把所有变更先集中在内存中完成。
- 新增多条：创建 DocumentFragment，循环 appendChild 到它，最后一次性挂载到真实 DOM
- 删除多条：不要逐个 removeChild；改用 innerHTML = '' 或 replaceChildren()（现代浏览器支持），它们内部做了优化，比循环移除快得多
- 示例：替换整个列表内容
const listEl = document.getElementById('list');<br>const fragment = document.createDocumentFragment();<br>data.forEach(item => {<br> const li = document.createElement('li');<br> li.textContent = item;<br> fragment.appendChild(li);<br>});<br>listEl.replaceChildren(fragment); // 一次更新，无中间状态
避免保留无用的 DOM 引用
即使元素已从页面移除，只要 JS 还持有它的引用，它就无法被垃圾回收——这是大型列表中最隐蔽的内存泄漏源。
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
- 删除节点后，检查是否还存在变量（如缓存的 element、event listener 回调中的闭包）指向它
- 使用 WeakMap 存储与 DOM 元素关联的元数据，这样元素被移除后，WeakMap 自动丢弃对应条目
- 监听器要可清除：给 addEventListener 的回调命名或用 AbortController 管理，避免长期驻留
控制数据对象的生命周期
列表项背后的数据对象（如用户对象、配置项）如果结构大、引用深，容易因闭包或全局缓存滞留内存。
- 不用全局数组长期缓存全部原始数据；按需加载、用完即弃，或用 Map + ID 键做弱引用缓存
- 避免在事件处理器中直接捕获大数据对象；改传 ID，在 handler 内按需查表
- 对超长列表，考虑用“对象池”复用已创建的 DOM 元素和数据容器，而非反复 new/delete
分批处理 + requestIdleCallback
一次性处理几千项会阻塞主线程。应拆解任务，让出控制权给 UI 渲染。
- 增删大量项时，用 requestIdleCallback 分片执行，每帧只处理几十条
- 配合 setTimeout(fn, 0) 或 queueMicrotask 实现轻量级调度，避免卡顿
- List.js 的 addAsync 就是这个思路：它把大数据集切块，用 setTimeout 逐批插入，防止 UI 冻结
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
