前端常见的内存泄漏场景有四类:一是全局变量意外挂载(未声明就赋值);二是被遗忘的定时器或事件监听器,组件销毁后仍在运行;三是闭包长期持有大对象不释放;四是已删除的 DOM 节点仍被 JS 变量引用。单页应用反复切换页面但不清理时最容易暴露。
排查用 Chrome DevTools 的 Memory 面板:先拍堆快照做一次操作再拍一次,对比增量找出持续增长的对象;也可用分配时间线录制每次分配。回答时强调用弱引用(WeakMap、WeakSet)保存不必要持有的引用,并在组件卸载钩子里清理监听器与定时器。
// 泄漏:定时器与闭包持有大对象,销毁后未清理 class Timer { constructor() { this.data = new Array(1e6).fill('x'); } start() { this.timer = setInterval(() => { console.log(this.data.length); // 闭包一直持有 this.data }, 1000); } destroy() { clearInterval(this.timer); this.data = null; } // 修复 } const t = new Timer(); t.start(); setTimeout(() => { t.destroy(); console.log('已清理,不再持有大对象'); }, 4000);