如何找到JS内存泄漏?

时间:2013-04-12 11:44:32

标签: javascript google-chrome

我一直在使用chrome中的堆分析器,但它非常令人困惑。特别是如果里面有最小化的库。但即使是DOMElements观点,也可能不清楚可能无法删除的元素。

是否有任何提示如何在chrome中使用堆转储来查找导致内存泄漏的JS代码,无法通过GC清除的代码...以及如何查找即使从dom中删除的元素仍在乱搞?

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

7 个答案:

答案 0 :(得分:30)

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

以下是使用最近的Chrome浏览器在javascript中查找内存泄漏:

  1. F12 打开开发人员工具,然后转到内存标签
  2. Chrome Developer Tools - Memory Tab

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

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

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

    4. Memory timeline

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

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

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

        3. 其他提示:

          • 有时会有缓存保留部分内存。通常你可以忽略它们。
          • 当您看到对象类型列表中的HTMLDivElement或其他DOM元素时,请查看。如果此列表中的对象突出显示为红色,则表示它们不再出现在您的页面中。这意味着它们必须在代码中的某处引用。您可能忘记取消绑定事件监听器。
          • Read about memory leaks in general,因此您可以在代码中更快地识别它们。

答案 1 :(得分:26)

在Chrome开发者工具中,有一个时间轴 - 内存标签:

enter image description here

我们可以看到它占用的内存。

还有Profiles - Memory,我们可以在这里拍摄快照,看看里面有什么。快照可以相互比较:

enter image description here

大部分时间,它都没有告诉你任何事情。但至少你可以看到哪些物体在堆积,可能还有泄漏的结构。

其他方式是使用'Task Manager' 这是一篇关于此的文章:

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

答案 2 :(得分:17)

Google为此开放了一个工具leak-finder-for-javascript。他们还提出了一种所谓的three snapshot technique方法(另见this article中的简要说明。)

First paragraph of the leak-finder link

  

注意:不再支持jsleakcheck!它正在针对一个非官方和不稳定的Dev Tools协议来处理堆快照。   该协议正在进行中,并且它不够稳定,所以我   可以让jsleakcheck使用各种Chrome版本。在   另外,一个较低级别的兼容性工具,   remote_inspector_client.py,jsleakcheck用来进行通信   使用Dev Tools,已删除。

答案 3 :(得分:7)

我发现这篇文章非常有见地:

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

它确实涵盖了Chrome开发人员工具,并且很好地解释了当您的应用程序出现内存问题时如何处理。

答案 4 :(得分:3)

以下是关于如何使用Google Developper工具查找内存泄漏的非常好的帖子:http://gent.ilcore.com/2011/08/finding-memory-leaks.html

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

答案 5 :(得分:3)

如果您正在开发客户端可重用脚本对象,迟早会发现自己发现内存泄漏。有可能你的浏览器会像海绵一样吮吸内存,你几乎无法找到为什么你的可爱的DHTML导航响应性在访问你网站的几页之后会严重减少的原因。

微软开发人员Justing Rogers在他的优秀文章中描述了IE漏洞模式。

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

为什么内存泄漏?

内存泄漏问题不仅限于Internet Explorer。如果你提供足够的条件,几乎任何浏览器(包括但不限于Mozilla,Netscape和Opera)都会泄漏内存(并不是很难这样做,我们很快就会看到)。但是(以我的拙见,ymmv等)Internet Explorer是泄密者之王。

别误会我的意思。我不属于人群大喊“嘿IE有内存泄漏,检查这个新工具[link-to-tool]并亲眼看看”。让我们讨论一下蹩脚的Internet Explorer是如何掩盖其他浏览器的所有缺陷“。

每个浏览器都有自己的优点和缺点。例如,Mozilla在初始启动时消耗了太多内存,在字符串和数组操作方面效果不佳;如果你编写一个令人困惑的复杂DHTML脚本混淆其渲染引擎,Opera可能会崩溃。

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

以下是关于内存泄漏概念的完整示例说明...

Ream from here

答案 6 :(得分:0)

我看不到提到的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