如何发现 JS 内存泄漏？

Question

我一直在努力使用 chrome 中的堆分析器，但它非常令人困惑。特别是如果里面有最小化的库。但即使是 DOMElements 视图，可能不会被删除的元素也非常不清楚。

是否有任何提示如何使用 chrome 中的堆转储来查找导致内存泄漏的 JS 代码，无法被 GC 清理的代码……以及如何查找乱七八糟的元素，即使从 dom 中删除？

换句话说，如何正确读取 chrome 中的堆转储？统治者观点？比较？

原文由 Jens Peters 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

谷歌为此开源了一个工具 leak-finder-for-javascript 。他们还提出了一种称为 三快照技术 的方法（另见 本文 的简要说明）。

泄漏查找器链接的第一段

注意：不再支持 jsleakcheck！它针对用于获取堆快照的非官方且不稳定的 Dev Tools 协议工作。该协议正在制定中，它不够稳定，因此我无法让 jsleakcheck 与各种 Chrome 版本一起工作。此外，jsleakcheck 用来与开发工具通信的较低级别的兼容性工具 remote_inspector_client.py 已被删除。

原文由 adrianp 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

Chrome 现在提供了比大多数答案时更好的工具来查找内存泄漏。

这是使用最近的 Chrome 浏览器查找 javascript 中的内存泄漏：

1. 按 F12 打开开发人员工具并转到 Memory 选项卡。

1. 选择您要检查泄漏的功能或应用程序的一部分。例如，当一个对话框被再次打开和关闭时，它使用的内存应该被释放。

2. 执行一次要检查内存泄漏的操作（例如打开对话框），以便加载潜在的全局服务。这可以防止这些有意保留的对象显示为泄漏。

3. 现在选择 Record Allocation Timeline 并按下 Start 。重复您要检查泄漏的操作几次。因此，例如打开一个对话框，关闭它并重复。当您执行此操作时，Chrome 会绘制带有部分灰色或蓝色条的时间轴。通常，您每次在页面上执行操作时都会看到一个栏。 当操作的几个先前迭代的条形图保持部分蓝色时，通常意味着存在内存泄漏。条形的蓝色部分代表此时分配的内存，还没有再次释放。 按开发人员工具左上角的红点停止录制。

1. 当您看到潜在的泄漏时，您必须检查时间线的这一部分以找到源头。选择时间轴的一部分，它是您过去操作的几次迭代。 Chrome 将显示内存中仍然存在的对象类型列表。 保留大小 列让您了解仍有多少内存在使用。浏览到其中一种对象类型并选择一个对象。如果这样做，保留者列表将出现在下方。

1. 保留器列表显示引用所选对象的“父”对象。现在您需要查看保留器和您的代码以了解内存未被释放的原因。例如，在图像中，您可以看到类型范围的对象。第二行表示范围是“initFormat() 中的上下文”。问题是 initFormat 是一个事件侦听器，它在离开对话框后没有解除绑定。

2. 修复代码后，检查问题是否已解决。刷新页面并再次重复步骤 3 到 6。如果您以前从未检查过内存泄漏，那么您很可能会发现多个问题。

附加提示：

• 有时会有缓存保留一部分内存。通常你可以忽略它们。
• 当您看到 HTMLDivElement 或对象类型列表中的其他 DOM 元素时，请查看。如果此列表中的对象突出显示为红色，则表示它们不再出现在您的页面中。这意味着它们必须在代码中的某处被引用。您可能忘记取消绑定事件侦听器。
• 阅读有关一般内存泄漏的信息，以便您可以在代码中更快地识别它们。

原文由 HannesH 发布，翻译遵循 CC BY-SA 3.0 许可协议