JS `Memory Snapshots` `Dominators` 视图：发现内存泄漏的主要贡献者

各位观众老爷，大家好！今天咱们来聊聊一个让无数程序员头疼的问题：内存泄漏！更具体地说，咱们要深入JS的Memory Snapshots和Dominators视图，看看怎么利用它们揪出内存泄漏的罪魁祸首。

想象一下，你写了一个炫酷的Web应用，功能强大，界面精美。上线之后，用户反馈说用着用着浏览器就卡死了，或者干脆崩溃了。你一脸懵逼地打开控制台，发现内存占用蹭蹭往上涨，就像脱缰的野马，根本停不下来。这八成就是内存泄漏在作祟！

什么是内存泄漏？

简单来说，内存泄漏就是程序在不再需要使用某些内存时，没有及时释放，导致这部分内存一直被占用。就像你租了一间房子，住了几天就搬走了，但是房租还在交，房子一直空着，白白浪费钱。

在JavaScript中，垃圾回收器（Garbage Collector, GC）会自动回收不再使用的内存。但是，如果你的代码写得不小心，可能会阻止GC回收某些内存，从而导致内存泄漏。

Memory Snapshots：内存的快照

Chrome开发者工具提供了一个强大的工具叫做Memory面板，它可以帮助我们分析内存使用情况。其中，Memory Snapshots功能可以让我们拍摄内存的“快照”，记录下特定时刻所有对象的信息。

你可以把它想象成给内存拍了一张照片，照片里包含了所有对象的类型、大小、引用关系等等。通过对比不同时刻的快照，我们可以找出哪些对象一直在增长，哪些对象应该被回收却没有被回收，从而定位内存泄漏的根源。

如何拍摄和分析Memory Snapshots？

1. 打开开发者工具: F12或者右键点击页面，选择“检查”/“审查元素”。
2. 切换到Memory面板: 在开发者工具中找到“Memory”选项卡。
3. 选择Heap snapshot: 在“Select profiling type”下拉菜单中选择“Heap snapshot”。
4. 点击Take snapshot按钮: 点击左侧的圆形按钮，开始拍摄快照。
5. 分析快照: 拍摄完成后，快照会显示在左侧的列表中。点击快照，就可以在右侧查看详细信息。

Dominators：谁是幕后黑手？

Dominators视图是Memory Snapshots中最有用的视图之一。它可以帮助我们找到内存泄漏的“支配者”，也就是那些持有大量内存的对象。

一个对象A支配另一个对象B，如果想要访问B，必须先经过A。换句话说，A是B的“老大”，控制着B的生死。如果A发生了内存泄漏，那么A支配的所有对象都会受到牵连，一起被困在内存里，无法释放。

Dominators视图会以树状结构展示对象之间的支配关系，树的根节点是全局对象，叶子节点是那些被支配的对象。通过查看这棵树，我们可以快速找到那些占用大量内存的“老大”，从而定位内存泄漏的源头。

Dominators视图的几个重要概念：

• Retained Size: 一个对象本身占用的内存大小，加上它直接或间接支配的所有对象占用的内存大小的总和。 这是判断内存泄漏的关键指标。
• Shallow Size: 对象自身占用的内存大小，不包括它支配的对象的内存大小。
• Constructor: 创建对象的构造函数。 例如，Array、Object、MyCustomClass等等。

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

咱们来看一个简单的内存泄漏例子，用代码模拟一个常见的场景：

let elements = [];

function createAndAppendElement() {
  let element = document.createElement('div');
  element.innerHTML = 'Hello, World!';
  document.body.appendChild(element);
  elements.push(element); // 存储element引用，导致无法释放
}

setInterval(createAndAppendElement, 100); // 每100毫秒创建一个元素

这段代码会不断地创建新的div元素，并将它们添加到document.body中。同时，它还会将这些元素的引用存储在elements数组中。

问题就出在这里：elements数组一直持有这些元素的引用，导致垃圾回收器无法回收它们。即使这些元素已经从DOM树中移除，它们仍然会被elements数组“拽”住，无法释放。随着时间的推移，内存占用会不断增加，最终导致内存泄漏。

如何使用Memory Snapshots和Dominators视图来发现这个泄漏？

1. 运行代码: 将上面的代码复制到HTML文件中，并在浏览器中打开。
2. 打开开发者工具: F12或者右键点击页面，选择“检查”/“审查元素”。
3. 切换到Memory面板: 在开发者工具中找到“Memory”选项卡。
4. 拍摄多个快照: 每隔一段时间（例如，10秒）拍摄一个快照。 至少拍摄2-3个快照，以便进行比较。
5. 比较快照: 在快照列表中，选择一个快照，然后选择另一个快照，点击“Comparison”按钮。 这将显示两个快照之间的差异。
6. 查看Dominators视图: 在快照详情页面，选择“Dominators”视图。
7. 查找Retained Size大的对象: 按照“Retained Size”列排序，找到那些占用大量内存的对象。
8. 分析对象引用关系: 展开这些对象的树状结构，查看它们的引用关系，找到泄漏的根源。

你会发现，elements数组的Retained Size会随着时间的推移不断增加。展开elements数组的树状结构，你会看到它持有大量的HTMLDivElement对象。这就是内存泄漏的罪魁祸首！

如何修复这个泄漏？

修复这个泄漏的方法很简单，只需要在不再需要这些元素时，从elements数组中移除它们的引用即可。例如，可以在元素从DOM树中移除时，将其从elements数组中删除。

let elements = [];

function createAndAppendElement() {
  let element = document.createElement('div');
  element.innerHTML = 'Hello, World!';
  document.body.appendChild(element);
  elements.push(element);

  // 移除元素时，从数组中删除引用
  element.addEventListener('DOMNodeRemoved', function() {
    let index = elements.indexOf(element);
    if (index > -1) {
      elements.splice(index, 1);
    }
  });
}

setInterval(createAndAppendElement, 100);

或者，更简单粗暴的方法是，直接避免将元素引用存储在全局数组中，如果不需要长期持有这些引用的话。

更复杂的内存泄漏场景

上面的例子只是一个简单的演示，实际的内存泄漏场景可能会更加复杂。例如，闭包、事件监听器、定时器等等都可能导致内存泄漏。

• 闭包: 闭包可以访问其创建时所在的作用域中的变量。如果闭包持有外部变量的引用，并且这个闭包长期存在，那么即使外部变量不再使用，它仍然会被闭包“拽”住，无法释放。

• 事件监听器: 如果为一个DOM元素添加了事件监听器，并且在不再需要这个监听器时没有将其移除，那么这个监听器会一直存在，阻止DOM元素被回收。

• 定时器: setTimeout和setInterval函数可以创建定时器。如果定时器中的回调函数持有外部变量的引用，并且定时器没有被清除，那么即使外部变量不再使用，它仍然会被定时器“拽”住，无法释放。

一些常用的调试技巧

• 善用Comparison功能: 比较不同快照之间的差异，可以快速找到那些一直在增长的对象。
• 关注Retained Size: Retained Size是判断内存泄漏的关键指标，关注那些Retained Size大的对象。
• 查看引用关系: 展开对象的树状结构，查看它们的引用关系，找到泄漏的根源。
• 使用Performance面板: Performance面板可以记录JavaScript代码的执行时间，帮助你找到那些性能瓶颈和内存分配频繁的地方。
• Code Review: 请同事帮忙review代码，可以发现一些潜在的内存泄漏问题。
• 使用工具: 可以使用一些专门的内存泄漏检测工具，例如LeakCanary (Android) 或其他类似的JS工具。

案例分析：常见的内存泄漏模式

内存泄漏模式	原因	解决方法
意外的全局变量	在函数内部忘记使用 var, let, 或 const 声明变量，导致变量泄漏到全局作用域。	始终使用 var, let, 或 const 声明变量。 使用严格模式 ("use strict";) 可以避免意外的全局变量。
闭包中的循环引用	闭包引用了外部作用域中的变量，而外部作用域又引用了闭包，形成循环引用，导致垃圾回收器无法回收这些对象。	避免循环引用。如果无法避免，可以在不再需要闭包时，手动将其设置为 null，解除引用。
遗忘的定时器	使用 setTimeout 或 setInterval 创建的定时器，在不再需要时没有被清除，导致定时器中的回调函数一直被执行，阻止相关对象被回收。	使用 clearTimeout 或 clearInterval 清除定时器。
遗忘的事件监听器	为 DOM 元素添加的事件监听器，在 DOM 元素被移除或不再需要时没有被移除，导致监听器一直存在，阻止 DOM 元素被回收。	使用 removeEventListener 移除事件监听器。
DOM 节点引用	JavaScript 代码长期持有对 DOM 节点的引用，即使 DOM 节点已经被从 DOM 树中移除，仍然无法被回收。	避免长期持有对 DOM 节点的引用。如果需要长期持有，可以在 DOM 节点被移除时，手动将其引用设置为 null。
控制台日志	在生产环境中，控制台日志可能会持有对对象的引用，阻止这些对象被回收。	在生产环境中禁用控制台日志。
缓存	过度使用缓存，导致缓存中的数据越来越多，占用大量内存。	限制缓存的大小，定期清理缓存。

总结

内存泄漏是一个复杂的问题，但是通过Memory Snapshots和Dominators视图，我们可以有效地定位内存泄漏的根源，并采取相应的措施进行修复。 记住，预防胜于治疗，良好的编码习惯可以有效地避免内存泄漏的发生。 多学习，多实践，你也能成为内存泄漏的克星！

好了，今天的讲座就到这里。希望对大家有所帮助！下次再见！