JavaScript内存泄漏常见于全局变量、定时器、事件监听、闭包和DOM引用未清理，可通过Chrome DevTools的Memory和Performance面板检测，并用WeakMap/WeakSet优化引用管理。
JavaScript中的内存泄漏虽然不像C/C++那样常见，但在长时间运行的单页应用中依然可能造成性能下降甚至崩溃。了解常见的泄漏模式并掌握检测方法，对维护应用稳定性至关重要。
常见内存泄漏模式
1. 意外的全局变量引用
未声明的变量会自动成为全局对象（如window）的属性，长期驻留内存。
示例：
<pre class="brush:php;toolbar:false;">function leakyFunction() { leak = "我是一个意外的全局变量"; // 忘记用var/let/const } leakyFunction(); // 'leak' 成为 window.leak
在严格模式下（use strict），这类错误会被抛出，避免隐式全局创建。
立即学习“Java免费学习笔记（深入）”；
2. 被遗忘的定时器或回调
setInterval或setTimeout中引用了外部作用域变量，且未清除，会导致回调函数及其依赖无法被回收。
示例：
<pre class="brush:php;toolbar:false;">setInterval(() => { const hugeData = fetchData(); document.getElementById('status').textContent = hugeData.status; }, 1000);
即使页面已切换，定时器仍在运行，持续持有hugeData引用。
3. 事件监听未解绑
DOM元素被移除后，若仍绑定事件监听，且监听器引用了外部变量，则该元素和相关数据无法释放。
示例：
<pre class="brush:php;toolbar:false;">const button = document.getElementById('btn'); function handleClick() { console.log('按钮被点击'); } button.addEventListener('click', handleClick); // 后续 removeChild 移除了 button，但未 removeEventListener
某些浏览器可能因此保留整个DOM节点及闭包作用域。
4. 闭包滥用导致的引用滞留
闭包会保持对外部变量的引用，若内部函数长期存活，外部的大对象也无法释放。
示例：
<pre class="brush:php;toolbar:false;">function createLeak() { const largeObject = new Array(10000).fill('data'); return function() { return largeObject; // 内部函数引用 largeObject }; } const keep = createLeak(); // largeObject 始终无法被回收
5. DOM 引用滞留（脱离文档树但仍被JS引用）
将DOM节点保存在全局变量或缓存中，即使该节点已被从页面移除，依然占用内存。
示例：
<pre class="brush:php;toolbar:false;">let cachedNodes = []; function appendAndCache() { const div = document.createElement('div'); document.body.appendChild(div); cachedNodes.push(div); // 即使 later removeChild(div)，这里仍引用 }
如何检测内存泄漏
1. 使用 Chrome DevTools 的 Memory 面板
- 打开 DevTools → Memory 标签
- 使用 Heap Snapshot（堆快照）：在操作前后各拍一张快照，对比对象数量变化
- 重点关注 detached DOM nodes（分离的DOM节点）和增长的对象类型
2. 使用 Performance 面板记录时间线
- 录制一段时间内的内存使用曲线（包括JS堆、DOM节点数、事件监听数）
- 观察内存是否随操作逐步上升且不回落
- 适合发现定时器或频繁DOM操作引起的缓慢泄漏
3. 启用 Chrome 的 Allocation instrumentation on timeline
该工具可显示每一毫秒新分配的对象，帮助定位频繁创建大对象的代码段。
4. 代码审查与规范约束
- 确保所有事件监听都有对应的 removeEventListener
- clearInterval/clearTimeout 在组件销毁时调用
- 避免将DOM节点长期存储在全局缓存中
- 使用 WeakMap/WeakSet 存储关联数据，允许对象被自动回收
5. 利用 WeakMap 和 WeakSet 减少强引用
它们只持弱引用，不会阻止垃圾回收。适合做元数据缓存。
示例：
<pre class="brush:php;toolbar:false;">const cache = new WeakMap(); const domNode = document.getElementById('myDiv'); cache.set(domNode, { tooltip: '提示信息' }); // 当 domNode 被移除且无其他引用时，cache 中对应项可被回收
基本上就这些。内存泄漏不复杂，但容易忽略，关键在于形成良好的资源管理习惯，并定期使用工具检查。
javascript java js node 浏览器 app 回调函数 工具 c++ win 作用域 JavaScript chrome chrome devtools 全局变量 回调函数 堆 闭包 JS 对象 作用域 事件 严格模式 dom