62

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

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

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

4

7 回答 7

68

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

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

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

Chrome 开发者工具 - 内存选项卡

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

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

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

记忆时间线

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

保持者名单

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

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

附加提示：

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

在 Chrome 开发者工具中，有一个 Timeline - Memory 选项卡：

在此处输入图像描述

我们可以观察它占用的内存。

还有 Profiles - Memory，我们可以在其中拍摄快照并查看里面的内容。快照可以相互比较：

在此处输入图像描述

大多数时候，它什么也没告诉你。但至少你可以看到哪些对象在堆积，并且可能是泄漏的结构。

另一种方法是在这里使用'Task Manager' 关于此的文章：

http://www.javascriptkit.com/javatutors/closuresleak/

于 2013-04-12T11:55:43.380 回答
20

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

泄漏查找器链接的第一段

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

于 2013-04-12T11:51:54.870 回答
8

我发现这篇文章很有见地：

http://addyosmani.com/blog/taming-the-unicorn-easing-javascript-memory-profiling-in-devtools/

它确实广泛地涵盖了 chrome 开发人员工具，并很好地解释了当您的应用程序似乎有内存问题时如何处理。

于 2014-07-15T09:53:26.817 回答
3

引用自JavaScript Kit：

如果您正在开发客户端可重用脚本对象，您迟早会发现自己发现内存泄漏。您的浏览器很可能会像海绵一样吸走内存，而且您几乎找不到原因，为什么您可爱的 DHTML 导航的响应能力在访问了您网站中的几个页面后会严重下降。

Microsoft 开发人员 Justin Rogers在其出色的文章（来自 web.archive.org）中描述了 IE 泄漏模式。

在本文中，我们将从稍微不同的角度回顾这些模式，并用图表和内存利用率图来支持它。我们还将介绍几个更微妙的泄漏场景。在我们开始之前，如果您还没有阅读，我强烈建议您阅读该文章。

为什么内存泄漏？

内存泄漏问题不仅限于 Internet Explorer。如果您提供足够的条件，几乎所有浏览器（包括但不限于 Mozilla、Netscape 和 Opera）都会泄漏内存（这并不难，我们很快就会看到）。但是（在我看来，ymmv 等）Internet Explorer 是泄密者之王。

不要误会我的意思。我不属于大喊“嘿 IE 有内存泄漏，检查这个新工具 [link-to-tool] 并自己看看”的人群。让我们讨论一下 Internet Explorer 有多糟糕，并掩盖其他浏览器中的所有缺陷”。

每个浏览器都有自己的长处和短处。比如 Mozilla 在初始启动时消耗太多内存，不擅长字符串和数组操作；如果你编写了一个复杂得离谱的 DHTML 脚本，它会混淆它的渲染引擎，Opera 可能会崩溃。

尽管我们将关注 Internet Explorer 中的内存泄漏情况，但此讨论同样适用于其他浏览器。

继续阅读...

于 2015-08-05T05:36:10.667 回答
2

这是一篇关于如何使用 Google 开发者工具查找内存泄漏的非常好的帖子：http: //gent.ilcore.com/2011/08/finding-memory-leaks.html

这是另一个很好的网页：http: //javascript.crockford.com/memory/leak.html

于 2013-04-12T11:47:46.653 回答
-1

我没有看到提到window.performance.memory的 ，它使您能够在运行时根据内存使用情况进行监控和采取行动。

window.performance.memory:

MemoryInfo {
  totalJSHeapSize: 7084834,
  usedJSHeapSize: 6486770,
  jsHeapSizeLimit: 4294705152
}

要获得方便的百分比，请使用以下命令：

window.performance.memory.usedJSHeapSize / window.performance.memory.jsHeapSizeLimit

https://developer.mozilla.org/en-US/docs/Web/API/Window/performance

于 2020-02-18T23:49:35.937 回答