JavaScript内存泄漏检测核心是确认“该回收的对象没被回收”,关键在于识别本该消失却持续驻留的对象;Chrome DevTools Memory面板提供堆快照、内存分配时间线和Performance+Memory三种视图,配合手动GC、WeakMap、heapdump、ESLint等手段,重点排查detached DOM、closure、timer/EventListener及全局变量。
JavaScript内存泄漏检测核心是确认“该回收的对象没被回收”。关键不在于看内存用了多少,而在于识别那些本该消失却持续驻留的对象。
它提供三种互补视图,配合使用效果最好:
单靠 DevTools 不够时,这些方法能补位:
if (global.gc) global.gc()(需 Node.js 启动加 --expose-gc)。触发后若对象仍存在,说明有活跃引用链阻止回收。const cache = new WeakMap(),元素被移除后自动失效,无需手动清理。npm install heapdump,代码中调用 heapdump.writeSnapshot() 生成 .heapsnapshot 文件,再用 Chrome DevTools 打开分析。no-unused-vars、no-undef、no-global-assign 等规则,提前拦截隐式全局变量、未使用变量等常见泄漏诱因。在快照对比中,优先筛选这几类:
ntListener:在 Elements 面板右键检查元素 → “Event Listeners” 查看是否残留监听;用 clearInterval/clearTimeout 和 removeEventListener 检查对应清理逻辑是否执行。Window 构造函数下的对象,展开看是否有意料之外的长生命周期数据。基本上就这些。不复杂但容易忽略——关键是养成“操作前后比快照”的习惯,而不是等页面卡死才去查。