JS `Chrome DevTools` `Memory` 面板：`Heap Snapshots` 内存泄漏定位

大家好，今天咱们聊聊Chrome DevTools里的Heap Snapshots，这玩意儿能帮你揪出JavaScript里那些偷偷摸摸搞事情的内存泄漏，让你的代码不再像漏水的马桶一样，哗哗往外流内存。

什么是内存泄漏？

先来个小科普，什么是内存泄漏？简单来说，就是你的代码申请了一些内存，用完了却忘了还给系统，这部分内存就成了“僵尸内存”，一直占用着，别的程序也没法用。时间一长，你的程序就会越来越慢，最后崩溃给你看。就像你租了个房子，住完就跑路了，房东想租给别人，发现房子还被你占着，只能干瞪眼。

在JavaScript里，由于有垃圾回收机制（Garbage Collection, GC），理论上应该很少出现内存泄漏。但实际上，只要你稍不留神，就会掉进内存泄漏的坑里。

Heap Snapshots 是什么？

Heap Snapshots 简单来说，就是给你的 JavaScript 堆内存拍了个照片。这个照片里记录了所有对象的信息，包括对象的大小、类型、引用关系等等。通过对比不同时间点的 Heap Snapshots，你就能找到那些一直在增长的对象，这些对象很可能就是内存泄漏的罪魁祸首。

如何使用 Heap Snapshots 查找内存泄漏？

Chrome DevTools 里的 Memory 面板提供了 Heap Snapshots 功能。下面我们一步一步来，看看怎么用它来查找内存泄漏：

打开 Chrome DevTools： 在 Chrome 浏览器里，按 F12 或者右键点击页面，选择“检查”或者“Inspect”。
切换到 Memory 面板： 在 DevTools 顶部找到 “Memory” 选项卡，点击进入。
选择 Heap Snapshot 类型： 在 Memory 面板左侧，你会看到一个下拉菜单，选择 “Heap snapshot”。
拍摄快照： 点击左侧的圆形按钮 “Take snapshot” (或者类似图标)，DevTools 就会给当前堆内存拍个快照。你可以拍多个快照，用来比较。
分析快照： 拍摄快照后，DevTools 会显示快照的详细信息。你可以通过不同的视图来分析快照，比如 “Summary”、“Comparison”、“Containment”、“Statistics”。

Heap Snapshot 的视图详解

Summary 视图： 这是最常用的视图，它按照构造函数（constructor）对对象进行分组，并显示每个构造函数的对象数量和总大小。你可以通过这个视图快速找到占用内存最多的对象类型。
Comparison 视图： 这个视图用于比较两个快照之间的差异。你可以选择两个快照，然后 DevTools 会显示新增、删除和修改的对象。这是查找内存泄漏的关键视图。
Containment 视图： 这个视图显示了对象的引用关系。你可以看到一个对象被哪些对象引用，以及它引用了哪些对象。这有助于你理解对象的生命周期和找到导致对象无法被回收的原因。
Statistics 视图： 这个视图显示了堆内存的统计信息，比如对象总数、字符串总长度等等。

实战演练：一个简单的内存泄漏例子

咱们来写一个简单的例子，模拟一个内存泄漏场景，然后用 Heap Snapshots 来找到它：

// 模拟一个全局变量，用来存储大量数据
let largeArray = [];

function createLeak() {
  let element = document.createElement('div');
  element.innerHTML = 'This is a leaky element';

  // 将 element 添加到 largeArray 中，但是没有移除
  largeArray.push(element);

  // 创建一个事件监听器，但是没有移除
  element.addEventListener('click', function() {
    console.log('Clicked!');
  });

  document.body.appendChild(element);
}

// 每隔一段时间创建一个泄漏元素
setInterval(createLeak, 1000);

这段代码的问题在于：

largeArray 不断地往里面添加 element，但是没有移除，导致 element 一直被引用，无法被垃圾回收。
element 添加了事件监听器，但是没有移除，导致 element 一直被引用，无法被垃圾回收。
document.body.appendChild(element)，虽然添加到DOM树，但是元素本身的问题导致无法回收。

现在，我们用 Heap Snapshots 来找到这个泄漏：

打开 DevTools，切换到 Memory 面板。
拍摄第一个快照： 点击 “Take snapshot”。
等待一段时间（比如 10 秒），让内存泄漏发生。
拍摄第二个快照： 点击 “Take snapshot”。
切换到 Comparison 视图： 选择第一个快照和第二个快照进行比较。
在 Comparison 视图中，你会看到新增的对象。 找到 HTMLDivElement 和 Array (对应 largeArray)，看看它们的大小是否在不断增长。如果它们一直在增长，就说明你找到了内存泄漏的罪魁祸首。
点击 HTMLDivElement，查看它的 retainers (保持者)。 retainers 显示了哪些对象引用了该对象，导致它无法被回收。你会看到 largeArray 引用了 HTMLDivElement，这就是导致内存泄漏的原因之一。你还会看到事件监听器也引用了 HTMLDivElement。

解决内存泄漏

找到内存泄漏的原因后，就可以开始解决它了。对于上面的例子，我们可以这样修改代码：

let largeArray = [];

function createLeak() {
  let element = document.createElement('div');
  element.innerHTML = 'This is a leaky element';

  // 将 element 添加到 largeArray 中，但是要限制大小，超过限制就移除旧元素
  if (largeArray.length > 100) {
    let oldElement = largeArray.shift();
    // 移除事件监听器
    oldElement.removeEventListener('click', handleClick);
    // 从 DOM 树中移除
    if (oldElement.parentNode) {
      oldElement.parentNode.removeChild(oldElement);
    }
    oldElement = null; // 解除引用，帮助垃圾回收
  }
  largeArray.push(element);

  // 创建一个事件监听器，但是要保存引用，方便移除
  element.addEventListener('click', handleClick);

  document.body.appendChild(element);

  function handleClick() {
    console.log('Clicked!');
  }
}

// 每隔一段时间创建一个泄漏元素
setInterval(createLeak, 1000);

修改后的代码：

限制了 largeArray 的大小，超过限制就移除旧元素，并手动解除引用。
保存了事件监听器的引用，方便移除。
在移除元素时，从DOM树中移除，并手动解除引用。

这样修改后，内存泄漏的问题就解决了。你可以再次使用 Heap Snapshots 来验证是否已经修复了内存泄漏。

常见的内存泄漏场景

除了上面的例子，还有一些常见的内存泄漏场景：

闭包： 闭包可以访问外部函数的变量，如果闭包一直存在，那么外部函数的变量也会一直存在，即使外部函数已经执行完毕。
定时器： setInterval 和 setTimeout 如果没有被正确地清除，会导致回调函数一直被执行，并且回调函数中引用的变量也会一直存在。
DOM 引用： 如果 JavaScript 代码中保存了对 DOM 元素的引用，但是 DOM 元素已经被从 DOM 树中移除，那么这个 DOM 元素仍然会存在于内存中。
事件监听器： 如果没有被正确地移除，会导致回调函数一直被执行，并且回调函数中引用的变量也会一直存在。
未释放的资源： 比如文件句柄、数据库连接等等，如果没有被正确地关闭，会导致资源泄漏。

Heap Snapshots 的高级用法

使用 Allocation instrumentation on timeline： 这个功能可以记录一段时间内的内存分配情况，并显示在 timeline 上。你可以通过这个功能找到哪些代码导致了大量的内存分配。
使用 Record allocation stacks： 这个功能可以记录每个对象的分配堆栈。你可以通过这个功能找到对象是在哪里被分配的。
使用 Constructor Filter： 可以通过构造函数过滤快照中的对象，只显示特定类型的对象。

优化代码，避免内存泄漏

除了使用 Heap Snapshots 来查找内存泄漏，更重要的是要养成良好的编码习惯，避免内存泄漏的发生：

及时清除定时器： 使用 clearInterval 和 clearTimeout 来清除定时器。
移除事件监听器： 使用 removeEventListener 来移除事件监听器。
避免全局变量： 尽量避免使用全局变量，使用局部变量或者模块化的方式来管理变量。
手动解除引用： 在不再需要使用某个对象时，将其设置为 null，帮助垃圾回收。
注意闭包： 避免在闭包中引用不必要的变量。
及时释放资源： 在使用完文件句柄、数据库连接等资源后，及时关闭它们。

总结

Heap Snapshots 是 Chrome DevTools 里一个非常强大的工具，可以帮助你查找和解决 JavaScript 内存泄漏问题。通过学习 Heap Snapshots 的使用方法，你可以更好地理解 JavaScript 的内存管理机制，编写更高效、更稳定的代码。记住，预防胜于治疗，养成良好的编码习惯，从源头上避免内存泄漏的发生，才是王道。

希望今天的讲座对大家有所帮助！如果大家还有什么问题，可以随时提问。祝大家编程愉快，不再被内存泄漏困扰！

表格总结

功能/概念	描述	作用
内存泄漏	指程序中已动态分配的堆内存由于某种原因程序未释放或无法释放，造成系统内存的浪费，导致程序运行速度减慢甚至系统崩溃等严重后果。	导致程序变慢，最终可能崩溃。
Heap Snapshots	给 JavaScript 堆内存拍个照片，记录所有对象的信息，包括大小、类型、引用关系等。	帮助开发者识别内存泄漏，找到占用内存过多的对象，分析对象的引用关系。
Summary 视图	按照构造函数对对象进行分组，显示每个构造函数的对象数量和总大小。	快速找到占用内存最多的对象类型。
Comparison 视图	比较两个快照之间的差异，显示新增、删除和修改的对象。	查找内存泄漏的关键视图，找到一直在增长的对象。
Containment 视图	显示对象的引用关系，可以看到一个对象被哪些对象引用，以及它引用了哪些对象。	理解对象的生命周期，找到导致对象无法被回收的原因。
Statistics 视图	显示堆内存的统计信息，比如对象总数、字符串总长度等等。	提供堆内存的整体概览。
Allocation instrumentation on timeline	记录一段时间内的内存分配情况，并显示在 timeline 上。	找到哪些代码导致了大量的内存分配。
Record allocation stacks	记录每个对象的分配堆栈。	找到对象是在哪里被分配的。
预防内存泄漏	及时清除定时器、移除事件监听器、避免全局变量、手动解除引用、注意闭包、及时释放资源。	从源头上避免内存泄漏的发生。