spa内存峰值过高主因是gc无法及时回收，需切断引用链、用weakmap管理元数据、分批处理大数据、严格管控全局变量与闭包。
现代单页应用（SPA）内存峰值过高，常表现为页面滚动卡顿、切换路由后内存不回落、甚至在低端设备上触发崩溃。核心不是“少写代码”，而是让垃圾回收器（GC）能及时识别并释放无用对象。关键在于切断引用链、控制数据生命周期、善用弱引用结构。
及时清理事件监听与DOM引用
未解绑的事件监听器是最常见的泄漏源头，尤其在动态渲染组件时——监听器闭包中若持有大型数据或整个组件实例，即使DOM节点已被移除，这些对象仍无法被回收。
- 绑定时保存 handler 引用，移除前必须显式调用 removeEventListener，不能依赖节点销毁自动清理
- 组件卸载（如 React 的 useEffect cleanup 或 Vue 的 beforeUnmount）中，同步清除定时器、观察器、自定义事件订阅
- 对临时插入的 DOM 节点，移除前手动将其引用置为 null，避免残留指针阻止 GC
用 WeakMap / WeakSet 管理私有状态
当需要为 DOM 元素或对象附加元数据（如缓存计算结果、标记加载状态），直接挂载到对象属性或使用普通 Map 会延长其生命周期。WeakMap 的键是弱引用，一旦目标对象不可达，对应条目自动消失，不阻碍回收。
- 替代
element.__cache = {...}，改用const cache = new WeakMap(); cache.set(element, {data: ...}) - 适合存储组件内部状态、第三方库扩展字段、防抖节流的上下文缓存
- 注意：WeakMap 键必须是对象，不能是字符串或数字；且无法遍历，适用于“附属关系”而非“主数据结构”
分批处理大数据，避免堆内存瞬时飙升
一次性加载万级列表、解析 MB 级 JSON、绘制大量 Canvas 图形，都会导致堆内存瞬间突破 300MB，触发长暂停 GC，造成明显卡顿。应把操作拆解，让主线程有空隙执行回收。
- 用 requestIdleCallback 或 setTimeout(fn, 0) 分片处理数组，每帧处理数百项，配合 performance.now() 控制单次耗时 ≤5ms
- 大数据渲染采用虚拟滚动（virtualized list），只保留可视区域 DOM，其余用占位高度维持滚动位置
- 大文件解析（如 CSV、Excel）使用流式读取（
ReadableStream）+ 分块处理，避免全量载入内存
严格管控全局变量与闭包作用域
意外创建的全局变量（如漏写 let/const）或长期存活的闭包，会让本该释放的对象一直驻留堆中。V8 对全局对象的回收极为保守。
- 启用 'use strict'，让未声明赋值抛出错误，杜绝隐式全局
- 避免在循环中定义函数或创建对象字面量，提取到外层作用域复用
- 大型数据处理完成后，主动赋值为 null（如
bigData = null），明确告诉 GC 该对象已废弃
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
