内存泄漏是JavaScript性能隐患，需通过Chrome DevTools分析堆快照、分配时间线和内存曲线，结合代码审查识别全局变量、事件监听器、闭包和定时器等常见泄漏模式，使用WeakMap/WeakSet避免强引用，并借助ESLint和Puppeteer实现自动化检测与监控。
JavaScript性能问题中，内存泄漏是常见但不易察觉的隐患。它会导致页面卡顿、响应变慢，甚至浏览器崩溃。要有效定位内存泄漏，必须结合开发者工具和代码分析手段，从堆内存变化入手，逐步排查异常对象的持有链。
使用Chrome DevTools监控内存变化
Chrome开发者工具提供了直观的内存分析功能，帮助我们观察运行时的内存使用情况。
- Memory面板中的堆快照（Heap Snapshot）：在关键操作前后手动拍摄堆快照，对比对象数量和内存占用，查找未被释放的多余实例。
- Record Allocation Timeline：开启后可实时追踪新分配的对象，观察哪些操作持续产生无法回收的对象，特别适合发现周期性泄漏。
- Performance tab记录内存曲线：勾选Memory选项，在页面交互过程中查看JS堆、DOM节点、监听器数量的变化趋势，若堆内存只增不减，很可能存在泄漏。
识别常见的泄漏模式
多数内存泄漏源于错误的引用管理。掌握典型场景能快速缩小排查范围。
- 意外的全局变量：未声明的变量会挂载到window上，长期驻留内存。使用严格模式（"use strict"）可避免此类错误。
- 未清理的事件监听器：DOM元素移除后，若事件监听未通过removeEventListener解绑，回调函数仍被保留。推荐使用AbortController或once选项简化管理。
- 闭包引用导致的驻留：长时间存在的外部函数闭包可能无意中保留大量数据。检查闭包内是否引用了大对象或DOM节点。
- 定时器中的引用：setInterval或setTimeout的回调引用了外部对象，且未清除，会造成持续占用。确保在适当时机调用clearInterval。
利用WeakMap/WeakSet预防强引用泄漏
标准对象会保持对键的强引用，阻止垃圾回收。在需要关联对象又不干预生命周期时，应优先使用弱引用结构。
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
立即学习“Java免费学习笔记（深入）”；
- WeakMap：以对象为键，不阻止键的回收。适合存储元数据而不影响目标对象生命周期。
- WeakSet：仅存储对象，且不阻止回收。可用于标记活动对象而无需手动清理。
- 注意：两者都不支持遍历，也不能作为缓存的直接替代品，但能有效避免非预期的长期持有。
代码审查与自动化检测
工具之外，良好的编码习惯和静态检查能提前发现问题。
- 定期审查涉及DOM操作、事件绑定、定时器和长生命周期对象的模块。
- 使用ESLint插件如eslint-plugin-memory检测潜在泄漏模式。
- 在测试环境中集成 Puppeteer 配合 memory dumps，实现自动化内存趋势监控。
基本上就这些。关键是建立“谁持有、谁负责释放”的意识，配合工具持续观察。内存泄漏往往不是突发的，而是积累的结果，早发现早处理成本最低。
