使用Chrome DevTools进行堆快照、内存分配时间线记录和垃圾回收监控，可有效检测JavaScript内存泄漏；结合Performance面板分析内存趋势，重点关注脱离文档的DOM节点和未解绑事件、闭包引用、定时器等常见泄漏场景；通过严格模式、及时解绑监听、使用WeakMap/WeakSet等手段预防泄漏，定期审查关键代码模块，确保内存合理释放。
JavaScript内存泄漏虽然不易察觉，但长期运行可能导致页面卡顿甚至崩溃。关键在于及时发现并定位问题。现代浏览器提供了强大的开发者工具来帮助我们检测内存泄漏，核心方法包括使用Chrome DevTools进行堆快照分析、记录内存分配时间线以及监控内存使用趋势。
1. 使用Chrome DevTools监控内存使用
打开Chrome开发者工具，进入Memory面板，可以对当前页面的内存状态进行深入分析。
常用操作包括：
- 堆快照（Heap Snapshot）：捕获某一时刻的JavaScript对象和DOM节点的内存分布。可用于对比前后对象数量变化，查找未释放的对象。
- 记录内存分配（Record Allocation Timeline）：实时追踪内存中对象的创建过程，有助于识别短期频繁创建且未回收的对象。
- 强制垃圾回收：点击垃圾桶图标手动触发GC，观察对象是否能被正常回收。
建议在怀疑存在泄漏的页面操作前后各拍一张堆快照，然后比较两者的差异，重点关注Detached DOM nodes（脱离文档的DOM节点）或重复增长的自定义对象。
2. 常见内存泄漏场景及排查
了解典型泄漏模式，能更快定位问题。
意外的全局变量引用未声明的变量会挂载到window上，长期驻留内存。
例如：
function leak() {
leakedVar = "我是一个意外的全局变量"; // 缺少 var/let/const
}
解决方法：使用严格模式（'use strict'）让此类错误抛出异常。
事件监听未解绑移除DOM元素前未移除事件监听，会导致元素无法被回收。
示例：
const btn = document.getElementById('myBtn');
btn.addEventListener('click', handleClick);
// 错误：删除按钮后未移除监听
document.body.removeChild(btn);
正确做法：调用removeEventListener，或使用WeakMap/AbortController管理监听。
闭包持有外部变量的引用，若这些变量包含大对象或DOM元素，可能阻止回收。
避免长时间保存不必要的外部引用，函数执行完后应确保引用可被切断。
定时器中引用外部对象setInterval或setT中引用了大量数据或DOM节点，即使页面已切换，定时器仍在运行。
imeout
务必在适当时机调用clearInterval或clearTimeout。
3. 利用Performance面板辅助分析
在Performance面板中录制一段时间的操作，查看内存曲线（Memory graph）。
如果内存持续上升，且GC后仍不回落，极可能存在泄漏。
同时观察DOM节点数、JS event listeners等指标是否异常增长。
4. 使用WeakMap和WeakSet预防泄漏
这两个结构不会阻止其键名对象被垃圾回收，适合用于关联数据而不影响生命周期。
例如：
const cache = new WeakMap();
const domNode = document.getElementById('myDiv');
cache.set(domNode, { data: '临时数据' });
// 当domNode被移除后，缓存也会自动释放
相比普通Map，WeakMap更安全，避免因缓存累积导致泄漏。
基本上就这些。定期检查关键模块的内存行为，结合代码审查和工具监控，能有效预防和发现JavaScript内存泄漏。
