18. 说说你对内存泄漏的理解？怎么排查内存泄漏？
问题解析
内存泄漏（Memory Leak）是指程序中已分配的内存由于某种原因未释放或无法释放，造成系统内存的浪费。在JavaScript中，虽然具有自动垃圾回收机制，但仍然可能出现内存泄漏。理解内存泄漏的原因、场景以及排查方法，是前端开发的重要技能。
核心概念
什么是内存泄漏
内存泄漏是在计算机科学中，由于疏忽或错误造成程序未能释放已经不再使用的内存。并非指内存在物理上的消失，而是应用程序分配某段内存后，由于设计错误，导致在释放该段内存之前就失去了对该段内存的控制，从而造成了内存的浪费。
内存泄漏的危害
- 程序运行速度减慢
- 系统性能下降
- 严重的可能导致程序崩溃
- 影响用户体验
详细解答
常见的内存泄漏场景
1. 意外的全局变量
function leak() {
// 忘记使用var/let/const声明
globalVariable = 'I am global'; // 挂载到window对象
}
// 另一种情况：this指向window
function leak2() {
this.name = 'leak'; // 非严格模式下，this指向window
}
leak2();
// 解决方案：使用严格模式
'use strict';
function noLeak() {
// globalVariable = 'test'; // 报错
}
2. 被遗忘的定时器
let data = { value: 'large data', array: new Array(1000000) };
// 定时器持续引用data
setInterval(() => {
console.log(data.value);
}, 1000);
// 即使不再需要data，由于定时器还在运行，data无法被回收
// 解决方案：清除定时器
let timer = setInterval(() => {
console.log(data.value);
}, 1000);
// 当不再需要时
clearInterval(timer);
data = null;
3. 闭包导致的内存泄漏
function outer() {
let largeData = new Array(1000000).fill('x');
let smallData = 'small';
return function inner() {
// 即使只使用了smallData，largeData也会被闭包引用而无法释放
return smallData;
};
}
let leak = outer();
// largeData一直占用内存
// 解决方案：减少闭包引用范围
function outerOptimized() {
let largeData = new Array(1000000).fill('x');
processLargeData(largeData); // 立即处理
largeData = null; // 解除引用
let smallData = 'small';
return function inner() {
return smallData;
};
}
4. DOM引用
// 即使从DOM中移除了元素，JavaScript中的引用仍然存在
let elements = {
button: document.getElementById('button')
};
// 从DOM中移除
document.body.removeChild(elements.button);
// 但elements.button仍然引用着DOM节点，无法被回收
// 解决方案：同时解除JavaScript引用
document.body.removeChild(elements.button);
elements.button = null;
5. 事件监听未移除
class EventManager {
constructor() {
this.data = new Array(1000000);
this.handleClick = this.handleClick.bind(this);
document.addEventListener('click', this.handleClick);
}
handleClick() {
console.log('clicked');
}
// 如果没有调用destroy，事件监听和data都无法被回收
destroy() {
document.removeEventListener('click', this.handleClick);
this.data = null;
}
}
深入理解
垃圾回收与内存泄漏的关系
// 引用计数的问题：循环引用
function createCircularReference() {
let objA = {};
let objB = {};
objA.ref = objB;
objB.ref = objA;
// 函数结束，objA和objB的引用计数都是1，无法被回收
// 现代浏览器的标记清除算法可以处理这种情况
}
// 但以下情况仍然会导致泄漏
let globalCache = {};
function leakWithCache() {
let key = 'key_' + Date.now();
globalCache[key] = new Array(1000000); // 大对象被缓存
// 如果没有清理机制，globalCache会不断增长
}
WeakMap和WeakSet
// 使用WeakMap避免内存泄漏
let weakCache = new WeakMap();
function processUser(user) {
if (!weakCache.has(user)) {
let processedData = heavyComputation(user);
weakCache.set(user, processedData);
}
return weakCache.get(user);
}
// 当user不再被其他地方引用时，WeakMap中的条目会自动被垃圾回收
let user = { name: 'John' };
processUser(user);
user = null; // user和对应的processedData都可以被回收
排查内存泄漏
使用Chrome DevTools
1. Performance面板
// 1. 打开Chrome DevTools -> Performance
// 2. 点击录制按钮
// 3. 执行 suspected leak code
// 4. 停止录制
// 5. 查看Memory图表，如果内存持续上升不下降，可能存在泄漏
2. Memory面板 - Heap Snapshot
// 步骤：
// 1. 打开Memory面板
// 2. 点击"Take heap snapshot"
// 3. 执行一些操作
// 4. 再次点击"Take heap snapshot"
// 5. 比较两个快照，查看哪些对象增加了
// 示例代码：模拟内存泄漏
function simulateLeak() {
let leaks = [];
setInterval(() => {
// 每次添加大对象
leaks.push(new Array(1000000).fill('leak'));
}, 1000);
}
// simulateLeak(); // 取消注释以模拟泄漏
3. Memory面板 - Allocation Timeline
// 步骤：
// 1. 选择Allocation instrumentation on timeline
// 2. 点击开始录制
// 3. 执行操作
// 4. 停止录制
// 5. 查看内存分配情况，蓝色条表示分配的内存，灰色表示已回收
代码层面的检测
// 使用Performance API监控内存
if (performance.memory) {
setInterval(() => {
const memory = performance.memory;
console.log('已使用内存(MB):', memory.usedJSHeapSize / 1048576);
console.log('总内存(MB):', memory.totalJSHeapSize / 1048576);
console.log('内存限制(MB):', memory.jsHeapSizeLimit / 1048576);
}, 5000);
}
最佳实践
1. 编码规范
// 使用严格模式防止意外全局变量
'use strict';
// 及时清理定时器
class TimerManager {
constructor() {
this.timers = new Set();
}
setTimeout(fn, delay) {
const id = setTimeout(fn, delay);
this.timers.add(id);
return id;
}
clearAll() {
this.timers.forEach(id => clearTimeout(id));
this.timers.clear();
}
}
// 使用事件委托减少监听器数量
document.body.addEventListener('click', (e) => {
if (e.target.matches('.button')) {
handleButtonClick(e);
}
});
2. 组件销毁时清理
class Component {
constructor() {
this.data = { /* 大量数据 */ };
this.listeners = [];
this.timers = [];
}
addEventListener(element, event, handler) {
element.addEventListener(event, handler);
this.listeners.push({ element, event, handler });
}
setTimeout(fn, delay) {
const id = setTimeout(fn, delay);
this.timers.push(id);
return id;
}
destroy() {
// 清理事件监听
this.listeners.forEach(({ element, event, handler }) => {
element.removeEventListener(event, handler);
});
this.listeners = [];
// 清理定时器
this.timers.forEach(id => clearTimeout(id));
this.timers = [];
// 清理数据
this.data = null;
}
}
3. 使用WeakRef（ES2021）
// WeakRef允许你持有对象的弱引用
class Cache {
constructor() {
this.cache = new Map();
}
set(key, value) {
const ref = new WeakRef(value);
this.cache.set(key, ref);
}
get(key) {
const ref = this.cache.get(key);
if (ref) {
const value = ref.deref();
if (value === undefined) {
// 对象已被垃圾回收
this.cache.delete(key);
}
return value;
}
return undefined;
}
}
面试要点
- 内存泄漏定义：能够清晰解释什么是内存泄漏及其危害
- 常见场景：掌握全局变量、定时器、闭包、DOM引用等常见泄漏场景
- 排查方法：熟练使用Chrome DevTools进行内存分析
- 预防措施：了解编码规范和最佳实践
- 弱引用：理解WeakMap、WeakSet和WeakRef的作用
常见问题
Q：为什么JavaScript有垃圾回收还会内存泄漏？ A：垃圾回收只能回收不再被引用的对象，如果由于编程错误导致对象被意外引用，垃圾回收器无法回收，就会造成泄漏。
Q：如何快速判断是否存在内存泄漏？ A：使用Chrome DevTools的Performance面板，观察内存使用曲线。如果内存持续增长而不下降，很可能存在泄漏。
Q：WeakMap和Map有什么区别？ A：WeakMap的键是弱引用，不会阻止垃圾回收。当键对象不再被其他地方引用时，WeakMap中的条目会自动被移除。