如何找到JS内存泄漏？

Question

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

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

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

Answer 1

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

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

1. 按F12打开开发人员工具,然后转到" 内存"选项卡.

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

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

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

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

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

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

其他提示:

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

Answer 2

在Chrome开发者工具中,有一个时间轴 - 内存选项卡:

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

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

大多数时候,它没有告诉你任何事情.但至少你可以看到哪些物体在堆积,可能还有泄漏的结构.

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

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

Answer 3

Google为此目的开放了一个工具,即漏洞搜索器,用于javascript.他们还提出了一种所谓的3个快照技术(另见简要说明这篇文章).

泄漏探测器链接的第一段

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

Answer 4

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

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

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