JavaScript作为一门自动垃圾回收的语言，开发者不需要手动管理内存，但如果代码中存在不合理的引用，就会导致垃圾回收机制无法释放不再使用的内存，最终引发内存泄漏。我们可以通过多种手段检测这类问题。
基于浏览器Performance API的检测方式
现代浏览器都提供了performance.memory接口，可以获取当前页面的内存使用信息，我们可以定期采样这些数据，观察内存是否呈现持续增长的趋势。
首先要注意，这个接口默认是关闭的，需要在Chrome浏览器的设置中开启Enable performance.memory选项，或者在启动浏览器时添加--enable-precise-memory-info参数。
以下是基础的内存监控示例代码：
// 定期采集内存信息
function monitorMemory() {
// 检查浏览器是否支持performance.memory
if (performance && performance.memory) {
const memoryInfo = performance.memory;
console.log('当前内存使用信息：');
console.log('已使用堆内存：' + (memoryInfo.usedJSHeapSize / 1024 / 1024).toFixed(2) + 'MB');
console.log('总堆内存：' + (memoryInfo.totalJSHeapSize / 1024 / 1024).toFixed(2) + 'MB');
console.log('堆内存上限：' + (memoryInfo.jsHeapSizeLimit / 1024 / 1024).toFixed(2) + 'MB');
// 如果已使用内存接近上限，可能存在内存问题
if (memoryInfo.usedJSHeapSize / memoryInfo.jsHeapSizeLimit > 0.9) {
console.warn('堆内存使用率超过90%，请检查是否存在内存泄漏');
}
} else {
console.warn('当前浏览器不支持performance.memory接口');
}
}
// 每5秒采集一次内存信息
setInterval(monitorMemory, 5000);
// 初始采集一次
monitorMemory();使用Chrome DevTools的堆快照对比检测
Chrome DevTools的Memory面板提供了更精准的内存分析能力，其中堆快照（Heap Snapshot）功能可以捕获某一时刻的内存分配情况，通过对比多次快照，就能找到持续增长且未被释放的对象。
操作步骤
- 打开Chrome DevTools，切换到Memory面板
- 选择Heap Snapshot选项，点击Take Snapshot拍摄第一次快照
- 执行你怀疑存在内存泄漏的操作，比如反复打开关闭某个弹窗
- 再次拍摄第二次快照，在快照列表中选择对比模式，查看哪些对象的数量在持续增加
如果发现有大量相同的对象实例未被释放，就可以顺着对象的引用链找到导致泄漏的代码位置。
常见内存泄漏场景的代码检测
很多内存泄漏都是由特定的代码写法导致的，我们可以在代码中提前规避这些场景，也可以通过检测工具定位这类问题。
意外的全局变量
在非严格模式下，未声明的变量会自动挂载到全局对象上，导致这些变量不会被垃圾回收。我们可以通过ESLint的no-undef规则提前规避，也可以在代码中检测全局对象上的异常属性。
// 检测全局对象上非预期新增的属性
const initialGlobalKeys = new Set(Object.keys(window));
function checkUnexpectedGlobalVars() {
const currentGlobalKeys = Object.keys(window);
const newKeys = currentGlobalKeys.filter(key => !initialGlobalKeys.has(key));
if (newKeys.length > 0) {
console.warn('发现意外的全局变量：', newKeys);
}
}
// 定期检测
setInterval(checkUnexpectedGlobalVars, 10000);被遗忘的定时器或回调
如果设置了定时器或者事件监听却没有在不需要的时候清除，就会导致回调函数引用的上下文无法被释放。我们可以在清除定时器或监听的函数中增加日志，确认是否执行。
// 封装定时器，便于跟踪
const timerMap = new Map();
function setTrackedInterval(fn, delay, ...args) {
const timerId = setInterval(fn, delay, ...args);
timerMap.set(timerId, {
fn: fn.toString(),
createTime: new Date().toLocaleString()
});
return timerId;
}
function clearTrackedInterval(timerId) {
if (timerMap.has(timerId)) {
clearInterval(timerId);
console.log('清除定时器：', timerMap.get(timerId));
timerMap.delete(timerId);
}
}
// 使用示例
const id = setTrackedInterval(() => {
console.log('定时器执行');
}, 1000);
// 5秒后清除定时器
setTimeout(() => {
clearTrackedInterval(id);
}, 5000);脱离DOM的引用
如果把DOM元素存储到数据结构中，即使页面上删除了这个DOM，由于引用还存在，DOM对象也不会被释放。我们可以通过检测存储的DOM是否还在文档中来判断。
// 存储DOM引用的数组
const domCache = [];
function cacheDom(element) {
domCache.push(element);
}
function cleanInvalidDomCache() {
let i = domCache.length;
while (i--) {
// 判断DOM是否还在文档中
if (!document.body.contains(domCache[i])) {
console.log('清除脱离文档的DOM引用');
domCache.splice(i, 1);
}
}
}
// 定期清理缓存
setInterval(cleanInvalidDomCache, 3000);总结
检测JavaScript内存泄漏需要结合工具分析和代码排查两种方式，Performance API适合做基础的内存趋势监控，Chrome DevTools的堆快照适合精准定位泄漏对象，而针对常见泄漏场景的代码检测可以帮助我们提前规避问题。日常开发中养成良好的内存管理习惯，定期检查应用的内存使用情况，就能有效减少内存泄漏问题的发生。
JavaScript内存泄漏内存检测performance_api修改时间：2026-06-07 03:16:57