JavaScript 内存泄露排查指南：Chrome DevTools 实战

引言：内存泄露的隐形杀手

你是否遇到过这样的问题：

• 应用运行一段时间后变得越来越慢
• 偶尔出现”页面无响应”的提示
• 内存占用持续上升，直到浏览器崩溃

这些很可能都是内存泄露（Memory Leak）造成的。在 JavaScript 中，内存泄露不会像 C/C++ 那样直接导致程序崩溃，但它会悄无声息地消耗用户设备的内存资源。

今天这篇教程将带你掌握内存泄露的排查技巧，让你成为能够识别并解决内存泄露的开发者。

第一章：什么是内存泄露？

1.1 内存管理机制

JavaScript 使用自动垃圾回收（Garbage Collection, GC）机制：

“`javascript
// JavaScript 的内存管理流程
// 1. 分配内存（变量、对象、字符串等）
let data = new Array(1000000);

// 2. 使用内存（操作数据）
data.forEach(item => process(item));

// 3. 释放内存（GC 自动回收不再使用的内存）
data = null; // GC 会回收这部分内存

垃圾回收算法：

标记 - 清除（Mark-and-Sweep）：最常用的 GC 算法
引用计数（Reference Counting）：部分浏览器使用


1.2 内存泄露的定义

内存泄露：程序分配了内存，但无法释放，导致内存持续增长。

javascript
// ✅ 正常情况
function normalCase() {
const data = createLargeData();
process(data);
// 函数执行完毕，data 被回收
}

// ❌ 内存泄露
let globalData; // 全局变量

function leakCase() {
globalData = createLargeData(); // 被全局引用，无法回收
process(globalData);
// globalData 一直占用内存
}

第二章：常见内存泄露场景

2.1 全局变量泄露

javascript
// ❌ 错误：意外创建全局变量
function init() {
leakedVariable = “I am global!”; // 忘记使用 let/const
}

// ✅ 正确
function init() {
const leakedVariable = “I am local!”;
}

// 验证方法
console.log(typeof leakedVariable); // “undefined” vs “string”

2.2 定时器未清除

javascript
// ❌ 错误：定时器未清除
class TimerComponent {
constructor() {
this.counter = 0;
this.timer = setInterval(() => {
this.counter++;
console.log(this.counter);
}, 1000);
}

// 忘记清除定时器！
}

// ✅ 正确：在组件销毁时清除定时器
class TimerComponent {
constructor() {
this.counter = 0;
this.timer = setInterval(() => {
this.counter++;
}, 1000);
}

dispose() {
clearInterval(this.timer); // 清除定时器
}
}

2.3 DOM 引用泄露

javascript
// ❌ 错误：DOM 节点引用导致无法回收
function createComponent() {
const container = document.createElement(‘div’);
const data = new Array(1000000); // 大量数据
container.dataset = data; // DOM 引用了数据

document.body.appendChild(container);
// 即使移除 DOM，data 仍被引用
}

// ✅ 正确：及时清理 DOM 引用
function createComponent() {
const container = document.createElement(‘div’);
const data = new Array(1000000);

container.textContent = “Content”;
document.body.appendChild(container);

// 组件销毁时
setTimeout(() => {
container.remove(); // 移除 DOM
data = null; // 解除引用
}, 5000);
}

2.4 闭包泄露

javascript
// ❌ 错误：闭包捕获不需要的变量
function createLeakyClosure() {
const hugeData = new Array(1000000).fill(‘data’);

return function() {
console.log(‘Hello’);
// hugeData 被闭包捕获，无法回收
};
}

const leakyFunc = createLeakyClosure();
leakyFunc();

// ✅ 正确：只捕获需要的变量
function createSafeClosure() {
const hugeData = new Array(1000000).fill(‘data’);
const neededData = ‘needed’;

return function() {
console.log(neededData);
};
}

const safeFunc = createSafeClosure();
safeFunc();

2.5 事件监听器未移除

javascript
// ❌ 错误：重复添加事件监听器
class Component {
constructor() {
this.handleClick = this.handleClick.bind(this);
document.addEventListener(‘click’, this.handleClick);
}

handleClick() {
console.log(‘Clicked’);
}

// 忘记移除监听器！
}

// ✅ 正确：移除事件监听器
class Component {
constructor() {
this.handleClick = this.handleClick.bind(this);
document.addEventListener(‘click’, this.handleClick);
}

handleClick() {
console.log(‘Clicked’);
}

dispose() {
document.removeEventListener(‘click’, this.handleClick);
}
}

第三章：Chrome DevTools 内存面板

3.1 打开内存面板

1. 打开 Chrome DevTools (F12 或右键 -> 检查)
2. 切换到 “Performance” 标签
3. 点击 “Heap” 子标签

或者

1. 打开更多工具 (⋮ -> More tools)
2. 选择 “Rendering” 确保 “Show coverage” 已启用

3.2 内存面板界面

┌─────────────────────────────────────────────────────┐
│ Memory (内存面板) │
├─────────────────────────────────────────────────────┤
│ [Take Snapshot] [Record allocation profile] │
│ ┌─────────────────────────────────────────────┐ │
│ │ Heap Snapshot (堆快照) │ │
│ │ ├─ Summary (摘要) │ │
│ │ ├─ Allocation instruments (分配仪器) │ │
│ │ ├─ Contained by (包含关系) │ │
│ │ ├─ Retainers (保留链) │ │
│ │ └─ Details (详情) │ │
│ └─────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘

第四章：使用 Heap Snapshot 排查内存泄露

4.1 创建堆快照

javascript
// 测试页面示例
function createData() {
return new Array(1000000).fill(‘data’);
}

// 按钮 1：创建数据
document.getElementById(‘create-btn’).onclick = () => {
window.data = createData();
};

// 按钮 2：清理数据
document.getElementById(‘clear-btn’).onclick = () => {
window.data = null;
};

操作步骤：


初始快照
打开 DevTools → Memory → Heap snapshot
点击 "Take snapshot"



创建对象
点击页面上的 "Create Data" 按钮
再次点击 "Take snapshot"



比较快照
在左侧选择两个快照
选择 "Comparison" 视图
观察 "Increased" 的项



分析结果
按 "Shallow size" 或 "Retained size" 排序
找出内存增长的主要来源


4.2 理解快照类型


  

    
类型
    
描述
    
用途
  
  

    
Heap Snapshot
    
捕获当前堆内存状态
    
对比分析内存增长
  
  

    
Allocation profiling
    
记录对象分配过程
    
查找频繁分配的对象
  
  

    
Allocation timeline
    
按时间记录分配
    
了解对象生命周期
  


4.3 分析 Retainers（保留链）

关键概念：

• Shorted size：对象本身占用的内存
• Retained size：对象被 GC 后，能回收的内存
• Retainers：引用该对象的对象链

分析步骤：

1. 找到疑似泄露的对象
2. 查看 Retainers 面板
3. 分析引用链，找出无法释放的原因
4. 定位到代码位置

4.4 实战案例：排查定时器泄露

问题现象：页面运行一段时间后内存持续增长

排查步骤：


创建测试页面

javascript
// test.html
let counter = 0;
let timer = setInterval(() => {
counter++;
if (counter % 10 === 0) {
console.log(‘Timer count:’, counter);
}
}, 100);

执行测试

1. 打开页面
2. 记录初始 Heap Snapshot
3. 等待 30 秒
4. 再次记录 Heap Snapshot
5. 对比两个快照

分析结果

在 Heap Snapshot 中查找：

• 查找 setInterval 相关的 DOM 元素
• 检查 Retainers 面板
• 发现定时器回调函数持有闭包引用

修复代码

javascript
// ✅ 修复方案
class TimerService {
constructor() {
this.timer = null;
this.start();
}

start() {
let counter = 0;
this.timer = setInterval(() => {
counter++;
console.log(‘Timer count:’, counter);
}, 100);
}

stop() {
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
}
}
}

// 使用
const timerService = new TimerService();

// 页面关闭时
window.addEventListener(‘beforeunload’, () => {
timerService.stop();
});

第五章：使用 Allocation Profiling

5.1 启用 Allocation Profiling

1. DevTools → Memory → Allocation instrumentation
2. 点击 “Record allocation profile”
3. 执行操作（如渲染大量数据）
4. 点击 “Stop recording”

5.2 分析分配记录

Allocation timeline 视图：

• 显示每个时间点的对象分配情况
• 绿色条：新分配的对象
• 红色条：对象被回收
• 灰色条：对象存活

通过此视图可以发现：

1. 对象分配频率异常高的代码
2. 对象未回收的时间点
3. 内存增长与操作的对应关系

5.3 实战案例：列表渲染泄露

javascript
// 问题代码
class ListView {
constructor(container) {
this.container = container;
this.items = [];
this.render();
}

addItems(newItems) {
this.items = this.items.concat(newItems);
this.render();
}

render() {
this.container.innerHTML = ”;
this.items.forEach(item => {
const div = document.createElement(‘div’);
div.textContent = item;
this.container.appendChild(div);
});
}

// ❌ 未清理旧的 DOM 引用
}

// 排查步骤：
// 1. 创建 ListView
// 2. 多次调用 addItems
// 3. 记录 Heap Snapshot
// 4. 查找未回收的 DOM 元素

5.4 修复方案

javascript
// ✅ 正确实现
class ListView {
constructor(container) {
this.container = container;
this.items = [];
this.render();
}

addItems(newItems) {
// 移除旧数据引用
this.items.forEach(item => item = null);

this.items = this.items.concat(newItems);
this.render();
}

render() {
// 清空容器
this.container.innerHTML = ”;

this.items.forEach(item => {
const div = document.createElement(‘div’);
div.textContent = item;
this.container.appendChild(div);
});

// 确保旧引用被清理
this.items = [];
}

// ✅ 提供清理方法
dispose() {
this.container.innerHTML = ”;
this.items = [];
}
}

第六章：性能面板的 Performance 功能

6.1 记录性能

1. DevTools → Performance → Record
2. 执行操作（如加载大量数据）
3. 停止录制
4. 分析结果

6.2 分析内存指标

关键指标：

• Memory 图表：显示内存使用趋势
• Total Heap Size：总堆内存大小
• Used Heap Size：已使用的堆内存
• Used Heap Size / Total Heap Size：内存利用率

异常情况：

• 内存持续增长不下降 → 可能泄露
• 内存突然跳跃 → 大量对象分配
• 内存下降缓慢 → GC 效率低

6.3 使用 Coverage 工具

javascript
// 启用 Coverage 工具
// DevTools → More tools → Rendering → Show coverage

// 分析结果：
// 红色：未执行的代码
// 黄色：部分执行的代码
// 绿色：完全执行的代码

// 查找泄露线索：
// 1. 检查从未执行的代码块
// 2. 检查持续执行但效果不佳的代码

第七章：常用排查技巧

7.1 定期 GC 触发

javascript
// 手动触发 GC（开发环境）
function forceGC() {
if (window.gc) {
window.gc();
} else {
console.warn(‘GC 未启用，需在 chrome://flags 中启用’);
}
}

// 配合测试使用
// 1. 创建对象
// 2. 清除引用
// 3. 强制 GC
// 4. 对比内存

7.2 使用弱引用

javascript
// ✅ 使用 WeakMap 避免泄露
const cache = new WeakMap();

function getCachedData(key) {
return cache.get(key);
}

function setCachedData(key, value) {
cache.set(key, value);
}

// 当 key 被释放时，WeakMap 会自动删除对应值

7.3 使用对象池

javascript
// ✅ 对象池复用对象
class ObjectPool {
constructor(factory, cleanup) {
this.factory = factory;
this.cleanup = cleanup;
this.pool = [];
}

acquire() {
if (this.pool.length > 0) {
return this.pool.pop();
}
return this.factory();
}

release(obj) {
this.cleanup(obj);
this.pool.push(obj);
}
}

// 使用
const divPool = new ObjectPool(
() => document.createElement(‘div’),
div => div.remove()
);

const div = divPool.acquire();
// 使用 div
divPool.release(div);

7.4 监控内存使用

javascript
// 实时监测内存
function monitorMemory() {
if (performance.memory) {
setInterval(() => {
const used = performance.memory.usedJSHeapSize;
const total = performance.memory.totalJSHeapSize;

console.log(`
已使用：${(used / 1024 / 1024).toFixed(2)} MB
总内存：${(total / 1024 / 1024).toFixed(2)} MB
利用率：${(used / total * 100).toFixed(2)}%
`);
}, 5000);
}
}

// 使用
monitorMemory();

第八章：生产环境排查

8.1 远程调试

javascript
// 启用 Chrome 远程调试
// 启动 Chrome：–remote-debugging-port=9222

// 浏览器访问：
// http://localhost:9222
// http://localhost:9222/devtools/page/{page-id}

// 或使用 curl
curl http://localhost:9222/json

8.2 自动化测试

javascript
// 自动化内存检测
async function checkMemoryLeak(testFn) {
// 初始快照
const snapshot1 = await takeHeapSnapshot();

// 执行测试
await testFn();

// GC
if (window.gc) window.gc();

// 再次快照
const snapshot2 = await takeHeapSnapshot();

// 比较
const diff = compareSnapshots(snapshot1, snapshot2);

if (diff.retainedSize > 1000000) { // 1MB
throw new Error(`检测到内存泄露：${diff.retainedSize / 1024 / 1024}MB`);
}
}

// 使用
await checkMemoryLeak(() => {
// 测试代码
createComponent();
});

8.3 性能监控

javascript
// 集成性能监控
class PerformanceMonitor {
constructor() {
this.snapshots = [];
}

async takeSnapshot() {
const response = await fetch(‘/api/heap-snapshot’);
const snapshot = await response.json();
this.snapshots.push(snapshot);
return snapshot;
}

detectLeak() {
if (this.snapshots.length < 2) return false; const recent = this.snapshots.slice(-3); const sizes = recent.map(s => s.usedJSHeapSize);

// 如果连续增长
const isGrowing = sizes.every((size, i) => {
return i === 0 || size > sizes[i-1];
});

return isGrowing;
}
}

第九章：最佳实践

9.1 编码规范

javascript
// ✅ 好的实践
class Component {
constructor() {
this.data = null;
this.timer = null;
}

mount() {
// 初始化
}

unmount() {
// 清理资源
this.data = null;
if (this.timer) {
clearInterval(this.timer);
}
}
}

// ❌ 不好的实践
let data = null; // 全局变量
let timer = null;

9.2 组件生命周期

javascript
// ✅ 完整的生命周期管理
class Component {
constructor() {
this.state = {};
this.listeners = new Set();
}

// 挂载
mount(container) {
container.appendChild(this.element);
window.addEventListener(‘resize’, this.handleResize);
}

// 更新
update(newState) {
this.state = { …this.state, …newState };
this.render();
}

// 卸载
unmount() {
// 移除 DOM
if (this.element && this.element.parentNode) {
this.element.parentNode.removeChild(this.element);
}

// 移除监听器
window.removeEventListener(‘resize’, this.handleResize);

// 清除定时器
if (this.timer) {
clearInterval(this.timer);
}

// 清空状态
this.state = {};
this.listeners.clear();
}
}

9.3 测试建议

javascript
// 建议编写内存测试
describe(‘Component Memory’, () => {
it(‘should not leak memory on mount/unmount’, async () => {
const snapshot1 = await takeHeapSnapshot();

const component = new Component();
component.mount(document.body);

component.unmount();

if (window.gc) window.gc();

await new Promise(resolve => setTimeout(resolve, 1000));

const snapshot2 = await takeHeapSnapshot();

const leaked = compareSnapshots(snapshot1, snapshot2);
expect(leaked.retainedSize).toBeLessThan(100000);
});
});
“`

总结：预防胜于治疗

内存泄露的排查需要耐心和技巧，但更重要的是预防：

1. 定期清理：在组件卸载时清理所有资源
2. 避免全局变量：尽量使用局部变量和闭包
3. 使用 WeakMap/WeakSet：对于缓存使用弱引用
4. 监听事件及时移除：确保事件监听器正确清理
5. 定时器及时清除：组件卸载时清除所有定时器
6. 定期性能测试：将内存测试纳入 CI/CD

常用工具总结：

• Heap Snapshot：对比分析内存变化
• Allocation Profiling：追踪对象分配
• Performance Panel：实时性能监控
• Coverage：分析代码执行

记住： 最好的性能优化是编写不会泄露的代码！🚀

—

参考资源：

• [Chrome DevTools Memory 文档](https://developer.chrome.com/docs/devtools/memory-problems/)
• [JavaScript Garbage Collection](https://javascript.info/garbage-collection)
• [Detecting Memory Leaks](https://web.dev/memory-best-practices/)
• [Chrome DevTools 指南](https://developer.chrome.com/docs/devtools/)
打赏赞微海报分享