JavaScript内核与高级编程之：`JavaScript`的`Memory Leak`：如何使用 `Heap Snapshot` 定位内存泄漏。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷们，大家好！今天咱们来聊聊JavaScript里那些“偷偷摸摸”的内存泄漏，以及如何用Chrome DevTools的“Heap Snapshot”把它们揪出来。别怕，这玩意儿听起来高大上，其实用起来也挺接地气的。

开场白：你以为你释放了，其实它还在

想象一下，你辛辛苦苦盖了一栋房子（分配了一块内存），用完了之后呢，你以为你把地基都拆了（释放了内存），拍拍屁股走人了。结果呢，地基还在！虽然房子没了，但地基占着地方，慢慢地，你的“内存地皮”越来越紧张，最后就盖不了新房子了（程序崩溃）。这就是内存泄漏的一个形象的比喻。

JavaScript有垃圾回收机制（Garbage Collection，简称GC），按理说，不用我们手动释放内存。但总有些情况，GC会“眼瞎”，看不到那些本该被释放的内存，导致内存泄漏。

啥是内存泄漏？

简单来说，内存泄漏就是你的程序占用的内存越来越多，但实际上这些内存已经没用了，也没被释放。长期以往，浏览器会越来越卡，甚至崩溃。

内存泄漏的常见类型

JavaScript里的内存泄漏，常见的有以下几种：

意外的全局变量：
```
function foo(arg) {
  bar = "这是一个意外的全局变量"; // 注意！这里没有用var/let/const声明
}

foo();
```
在这个例子里，bar成为了一个全局变量，即使foo函数执行完毕，它也不会被释放，因为它属于window对象。

解决方案: 永远使用var、let或const声明变量。
被遗忘的定时器和回调函数：
```
var intervalId = setInterval(function() {
  // 执行一些操作
  console.log("定时器还在运行...");
}, 1000);

// 如果不再需要定时器，忘记清除它...
// clearInterval(intervalId); // 缺少这一行！
```
setInterval和setTimeout创建的定时器，如果不再需要，必须使用clearInterval或clearTimeout清除。否则，它们会一直存在，并且它们的回调函数以及回调函数引用的变量也不会被释放。

解决方案: 确保在不再需要定时器时清除它们。
闭包引起的内存泄漏：
```
function outerFunction() {
  var outerVariable = "我是外部变量";

  function innerFunction() {
    console.log(outerVariable);
  }

  return innerFunction;
}

var myFunction = outerFunction(); // myFunction持有对outerFunction作用域的引用

// 即使myFunction不再使用，outerVariable也可能无法被释放。
// 关键在于是否还有其他地方引用了myFunction。
```
闭包可以访问外部函数的作用域，如果闭包一直存在，那么外部函数的变量也可能无法被释放。这需要仔细分析闭包的使用情况，确保不再使用时，闭包的引用被清除。

解决方案: 尽量避免不必要的闭包，或者在闭包不再需要时，显式地解除对外部变量的引用（虽然这通常不是最佳实践，但某些情况下是必要的）。

DOM元素引用：

var element = document.getElementById('myElement');
var data = {
  elementRef: element // 保存了对DOM元素的引用
};

// 即使DOM元素被移除，data对象仍然持有对它的引用，导致无法被GC回收。
document.body.removeChild(element);
element = null; // 这一行并不能解决问题，因为data.elementRef仍然指向原来的DOM
data.elementRef = null; // 需要显式地清除引用

当JavaScript对象引用了DOM元素时，即使DOM元素从DOM树中移除，如果JavaScript对象仍然持有对它的引用，那么这个DOM元素以及它包含的所有子元素都不会被垃圾回收。

解决方案: 在DOM元素被移除后，确保清除所有对它的引用。

监听器泄漏：
```
element.addEventListener('click', function() {
  // 处理点击事件
  console.log("点击事件被触发");
});

// 如果element被移除，但事件监听器没有被移除，就会发生泄漏。
// element.removeEventListener('click', function() { ... }); // 必须使用完全相同的函数引用才能移除监听器
```
如果你给一个DOM元素添加了事件监听器，但这个DOM元素被移除后，监听器没有被移除，那么就会发生内存泄漏。这是因为监听器会阻止DOM元素被垃圾回收。

解决方案: 在DOM元素被移除前，确保移除所有添加在其上的事件监听器。注意，移除监听器时必须使用与添加时完全相同的函数引用。
循环引用：
```
function createCircularReference() {
  var obj1 = {};
  var obj2 = {};

  obj1.prop = obj2;
  obj2.prop = obj1;

  return obj1;
}

var circularRef = createCircularReference();
circularRef = null; // 即使置为null，循环引用仍然存在，可能导致内存泄漏
```
当两个或多个对象相互引用时，就会形成循环引用。如果这些对象不再被程序使用，但由于循环引用，垃圾回收器可能无法判断它们是否可以被回收，从而导致内存泄漏。

解决方案: 打破循环引用。在不再需要这些对象时，将它们的属性设置为null或undefined，从而解除引用关系。

Heap Snapshot：你的内存侦探

Chrome DevTools的Heap Snapshot工具，就像一个内存侦探，可以帮你找出那些“偷偷摸摸”的内存泄漏。

如何使用Heap Snapshot

打开Chrome DevTools: 在Chrome浏览器中，按下F12键，或者右键点击页面，选择“检查”。
选择“Memory”面板: 在DevTools的顶部导航栏中，选择“Memory”面板。
拍摄Heap Snapshot: 在“Memory”面板中，你会看到一个圆形的按钮，上面写着“Take heap snapshot”。点击它，DevTools会生成一个当前堆内存的快照。
分析Snapshot: Heap Snapshot会显示当前堆内存中所有对象的详细信息，包括对象的大小、类型、以及它们之间的引用关系。

Heap Snapshot的几种视图

Heap Snapshot提供了几种不同的视图，方便你从不同的角度分析内存：

Summary: 这是默认视图，显示按构造函数分组的对象数量和大小。
Comparison: 可以比较两个Heap Snapshot之间的差异，找出哪些对象被创建或释放了。
Containment: 显示对象的引用关系，可以查看哪些对象引用了哪些对象。
Dominators: 显示对象的支配树，可以找到导致大量内存无法被释放的根对象。

分析Heap Snapshot的技巧

比较Snapshot: 这是最常用的方法。在执行一些操作前后，分别拍摄一个Heap Snapshot，然后比较这两个Snapshot，找出哪些对象被创建了，但没有被释放。
关注“Distance”列: 在Containment视图中，“Distance”列表示对象距离根节点的距离。距离越远，说明对象越深藏不露，越有可能存在内存泄漏。
使用“Retained Size”列: “Retained Size”列表示对象自身占用的内存加上它引用的所有对象占用的内存。如果一个对象的“Retained Size”很大，说明它可能是一个内存泄漏的根源。
查找Detached HTML Elements: 在Summary视图中，搜索“Detached HTML Elements”。这些是被从DOM树中移除，但仍然被JavaScript对象引用的DOM元素，是内存泄漏的常见原因。
利用Filter: 使用过滤功能快速定位到某个类型的对象，比如某个构造函数的实例，或者某个特定的字符串。

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

<!DOCTYPE html>
<html>
<head>
  <title>内存泄漏示例</title>
</head>
<body>
  <button id="myButton">点击我</button>
  <script>
    var button = document.getElementById('myButton');
    var theThing = {};

    button.addEventListener('click', function() {
      var unused = function() {
        console.log("不会被执行");
      };

      theThing.unused = unused; // 将unused函数赋值给theThing对象
      theThing.longStr = new Array(1000000).join('*'); // 创建一个大字符串
    });
  </script>
</body>
</html>

在这个例子中，每次点击按钮，都会创建一个新的unused函数和一个大字符串，并将它们赋值给theThing对象。虽然unused函数永远不会被调用，但由于它被theThing对象引用，因此无法被垃圾回收。随着点击次数的增加，内存占用会越来越大。

如何使用Heap Snapshot定位这个内存泄漏

打开Chrome DevTools，选择“Memory”面板。
点击“Take heap snapshot”按钮，拍摄第一个快照（Snapshot 1）。
多次点击按钮。
再次点击“Take heap snapshot”按钮，拍摄第二个快照（Snapshot 2）。
选择“Comparison”视图，并选择Snapshot 1作为基准快照。
在Comparison视图中，你会看到Snapshot 2相比Snapshot 1新增了很多对象，特别是字符串对象(String)，以及Object (theThing) 对象。
点击新增的String对象，可以在下面的retainers pane中看到它们被theThing对象引用。
点击新增的Object，你可以找到对应的theThing对象, 并查看它引用的 unused 函数和 longStr字符串。

通过这个分析，你就可以很容易地发现内存泄漏的原因：每次点击按钮，都会创建一个新的unused函数和一个大字符串，并将它们赋值给theThing对象，导致内存占用不断增加。

修复内存泄漏

要修复这个内存泄漏，可以在每次点击按钮之前，先清除theThing对象的属性：

    button.addEventListener('click', function() {
      // 清除之前的引用
      theThing.unused = null;
      theThing.longStr = null;

      var unused = function() {
        console.log("不会被执行");
      };

      theThing.unused = unused; // 将unused函数赋值给theThing对象
      theThing.longStr = new Array(1000000).join('*'); // 创建一个大字符串
    });

这样，每次点击按钮时，都会先释放之前的内存，避免内存泄漏。

进阶技巧

使用Performance Monitor: Chrome DevTools的Performance Monitor可以实时监控内存使用情况，帮助你发现内存泄漏的趋势。
使用第三方库: 有一些第三方库可以帮助你检测和修复内存泄漏，比如leakcanary (Android) 或 why-did-you-render (React).
代码审查: 定期进行代码审查，可以帮助你发现潜在的内存泄漏问题。

总结

内存泄漏是JavaScript开发中一个常见的问题，但只要掌握了Heap Snapshot等工具，就可以有效地定位和修复内存泄漏。记住，预防胜于治疗，编写代码时要时刻注意内存管理，避免不必要的对象引用，及时清除不再使用的变量和监听器。

记住，多用Heap Snapshot，就像侦探一样，让那些“偷偷摸摸”的内存泄漏无处遁形！

好了，今天的讲座就到这里，希望对大家有所帮助！感谢各位的收看！

发表回复 取消回复

发表回复取消回复