javascript 如何查找JS内存泄漏？

How to find JS Memory Leaks?

提问by Jens Peters

I have struggled around with the heap profiler in chrome but it is very confusing. Especially if there are minimized libraries inside. But even the DOMElements views, elements which may not be removed are very unclear presented.

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

Are there any tips how to use the heap dump in chrome to find JS code that leads to memory leaks, code that cannot be cleaned by GC... and how to find elements messing around even if removed from dom?

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

In other words, how to read heap dump in chrome correctly? Dominators View? Comparison?

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

采纳答案by adrianp

Google open sourced a tool for this purpose, leak-finder-for-javascript. They also proposed a method so-called the three snapshot technique(also see a brief description in this article).

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

First paragraph of the leak-finder link

泄漏查找器链接的第一段

Note: jsleakcheck is no longer supported! It was working against an unofficial and unstable Dev Tools protocol for taking heap snapshots. The protocol is being worked on, and it is not stable enough so that I could keep jsleakcheck working with various Chrome versions. In addition, a lower level compatibility tool, remote_inspector_client.py, which jsleakcheck was using to communicate with Dev Tools, got removed.

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

回答by MrJingles87

Chrome now offers much better tools to find memory leaks, than at the time of most answers.

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

Here is to find memory leaks in javascript with a recent Chrome browser:

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

1. Press F12to open the developer tools and go to the Memory Tab.

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

1. Pick a feature or a part of your app that you want to inspect for leaks. For example, when a dialog is opened and closed again, the memory used by it should be released.

2. Do the action (for example opening a dialog) you want to check for memory leaks once, so potential global services can be loaded. This prevents these objects, that are intentionally preserved from showing up as leaks.

3. Now select Record Allocation Timelineand press Start. Repeat the action you want to check for leaks a few times. So for example open a dialog, close it and repeat. While you do this Chrome draws the timeline with partially grey or blue bars. Usually you see a bar for each time you performed the action on your page. When the bar from several previous iterations of the action stays partially blue it usually means there is a memory leak. The blue part of the bar represents memory that was allocated at this time and has not yet been released again.Stop the recording by pressing the red dot on the top left of the developer tools.

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

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

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

1. When you see potential leaks you have to inspect this part of the timeline to find the source. Select a part of the timeline that is a few iterations of your actions in the past. And Chrome will show a list of object-types that are still present in the memory. The retained sizecolumn gives you an impression how much memory is still used. Browse into one of the object-types and select an object. If you do that, the list of retainers will appear below.

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

1. The list of retainers shows the "parent" objects that reference the selected object. Now you need to look at the retainers and your code to understand why the memory has not been released. For example in the image you see the object of the type scope. The second line says the scope is "context in initFormat()". The problem was that initFormat was an event listener that was not unbound after a dialog was left.

2. After you fixed your code check if the problem has been solved. Refresh the page and repeat the steps 3 to 6 again. If you have never checked for memory leaks before it is not unlikely that you find multiple problems.

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

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

Additional hints:

额外提示：

• Sometimes there are caches that retain a part of the memory. Usually you can ignore them.
• When you see the HTMLDivElementor other DOM elements in the list of object-types have a look. If the objects in this list are highlighted red it means they are no longer present in your page. This means they must be reference somewhere in the code. You may have forgotten to unbind an event listener.
• Read about memory leaks in general, so you can identify them quicker in your code.

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

回答by Sanjeev Rai

In Chrome developer tools, there is a Timeline - Memory tab:

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

We can watch the memory occupied by it.

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

There is also Profiles - Memory, where we can take a snapshot and see what's inside. Snapshots can be compared to each other:

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

Most of time, it doesn't tell you anything. But at least you can see which objects are piling up, and probably the structure of the leak.

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

Other way is using 'Task Manager'here is an article regarding this:

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

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

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

回答by bennidi

I found this article very insightful:

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

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

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

It does cover the chrome developer tools extensively and explains very well how to go about when your application seems to have memory issues.

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

回答by Sunny S.M

If you are developing client-side re-usable scripting objects, sooner or later you will find yourself spotting out memory leaks. Chances are that your browser will suck memory like a sponge and you will hardly be able to find a reason why your lovely DHTML navigation's responsiveness decreases severely after visiting a couple of pages within your site.

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

A Microsoft developer Justing Rogers has described IE leak patterns in his excellent article.

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

In this article, we will review those patterns from a slightly different perspective and support it with diagrams and memory utilization graphs. We will also introduce several subtler leak scenarios. Before we begin, I strongly recommend you to read that article if you have not already read.

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

Why does the memory leak?

为什么会出现内存泄漏？

The problem of memory leakage is not just limited to Internet Explorer. Almost any browser (including but not limited to Mozilla, Netscape and Opera) will leak memory if you provide adequate conditions (and it is not that hard to do so, as we will see shortly). But (in my humble opinion, ymmv etc.) Internet Explorer is the king of leakers.

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

Don't get me wrong. I do not belong to the crowd yelling "Hey IE has memory leaks, checkout this new tool [link-to-tool] and see for yourself". Let us discuss how crappy Internet Explorer is and cover up all the flaws in other browsers".

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

Each browser has its own strengths and weaknesses. For instance, Mozilla consumes too much of memory at initial boot, it is not good in string and array operations; Opera may crash if you write a ridiculously complex DHTML script which confuses its rendering engine.

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

Although we will be focusing on the memory leaking situations in Internet Explorer, this discussion is equally applicable to other browsers.

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

Here is complete example description about memory leak concept...

这是有关内存泄漏概念的完整示例描述...

Ream from here

从这里开始

回答by sdespont

Here is a very good post about how to find memory leaks using the Google Developper Tools: http://gent.ilcore.com/2011/08/finding-memory-leaks.html

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

Here is another good web page about that : http://javascript.crockford.com/memory/leak.html

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

回答by SimplGy

I don't see mentioned window.performance.memory, which gives you the run-time ability to monitor and take action based on memory usage.

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

window.performance.memory:

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

For a handy percentage, use this:

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

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

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

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