javaScript 内存泄漏指本该回收的 对象 因活引用滞留内存，导致页面卡顿甚至崩溃；主要成因包括意外 全局变量 、未解绑 事件 监听器、闭包 长期持有大对象、未清除定时器及 dom 引用。
javascript 内存泄漏，是指本该被 垃圾回收器 释放的对象，因为还存在“活的引用”，导致它一直留在内存中，无法被清理。这些对象逻辑上已无用，却持续占用空间，久而久之会让页面变卡、响应变慢，甚至崩溃。
意外的全局变量
在非 严格模式 下，忘记用 let、const 或 var 声明变量，会直接把它挂到 window（浏览器）上，变成永久存活的全局变量。比如：
function handleData() {
data = new Array(100000); // 没加 let/const → data 成为 window.data
}
多次调用后，大量数组 堆积在全局，无法回收。
立即学习“Java 免费学习笔记（深入）”；
- 始终启用 ‘use strict’，让未声明变量报错，提前拦截
- 避免直接往 window 上挂数据；如需全局缓存，用单例对象或 WeakMap 管理，并设上限
- 真要用全局变量存大块数据，用完立即赋值为 NULL
未清理的事件监听器
给 DOM 元素绑定事件后，若元素被移除，但监听器没手动解绑，它和闭包里捕获的变量都会滞留内存。尤其常见于 SPA 页面切换、组件销毁时。
const btn = document.getElementById(‘submit’);
btn.addEventListener(‘click’, onSubmit);
// 后续 btn.remove()，但没调用 removeEventListener → 监听器仍驻留
- 组件卸载或 DOM 移除前，务必配对调用 removeEventListener
- 优先使用 once: true 选项，适合只触发一次的场景
- 用 chrome DevTools 的「Elements → Event Listeners」面板快速定位残留监听器
闭包长期持有大对象
闭包能访问外层 作用域 变量，这是优势，也是风险点。如果一个闭包被长期保留（比如挂到全局、存进数组、作为定时器回调），它所捕获的大对象（如大数组、jsON 数据）就无法释放。
function createHandler(bigData) {
return function() { console.log(bigData.Length); };
}
const handler = createHandler(largeArray); // largeArray 被闭包“绑架”
- 只在闭包中捕获真正需要的字段，避免传入整个大对象
- 组件销毁时，主动将闭包引用置为 null，切断引用链
- 对需缓存的大对象，改用 WeakMap（键是对象，不阻止回收）或 WeakRef（ES2024）
未清除的定时器与 DOM 引用
setInterval / setTimeout 回调若持续运行，会保持对内部变量的引用；同时，JS 中保留已从 DOM 删除的节点引用（如缓存了 document.getElementById 返回的元素），也会阻止其关联的事件、样式、子树被回收。
- 页面或组件卸载时，统一调用 clearInterval / clearTimeout
- 移除 DOM 元素后，及时把 JS 变量设为 null，尤其涉及 innerhtml、appendChild 的操作
- 用 Chrome 的「Memory → Allocation instrumentation on timeline」录制内存分配，对比前后快照，定位持续增长的 构造函数
