JavaScript内存泄漏追踪工具

Question

我有一个网络应用程序，存在内存泄漏问题，但无法检测到原因。我已经尝试使用通常非常好用的Chrome开发者工具，但是我无法追踪导致内存泄漏的代码行。Chrome工具给了我太多信息，我无法将内存中的对象与我的代码关联起来。

是否有其他工具可能会有帮助？

- Preli

---

可能是JavaScript内存泄漏调试工具的重复问题。 - CD..

Answer 1

更新: 使用记录堆分配的性能剖析类型。

1. 打开开发工具的性能分析器
2. 执行预热操作
3. 启动分析器
4. 多次重复执行操作
5. 如果该操作存在泄漏，则在概述面板中将看到相同数量的蓝色条形组
6. 停止分析器
7. 在概述中选择其中一组蓝色条形
8. 查看对象列表

请参见录屏视频，JavaScript内存泄漏检测（Chrome DevTools）

过去: 您可以使用以下场景来查找内存泄漏。

1. 打开开发工具的性能分析器
2. 执行可能导致内存泄漏的操作
3. 拍摄堆快照
4. 重复2和3步骤三次
5. 选择最新的堆快照
6. 将过滤器“所有对象”更改为“第1个和第2个快照之间的对象”

完成后，您将看到一组泄漏对象。 您可以选择一个对象并查看其保留树中的保留者列表。

- loislo

---

通常情况下，您只需知道是谁将泄漏的对象添加到容器中，因为这是您的代码。但是如果您不知道，那么您可以重写泄漏对象类的构造函数，记录堆栈跟踪并从控制台调用原始函数。重复这些步骤并查看分配堆栈跟踪的对象。它可能会给您一个线索，泄漏对象的来源以及应该删除对泄漏对象的最后引用的代码。 - loislo

Answer 2

在Detached DOM tree视图和Heap Profiler中使用元素的innerHTML和outerHTML值来将内存中的对象映射到您的代码，并跟踪内存泄漏。

- Paul Sweatte

---

jQuery的ajax请求是我应用程序中最大的罪魁祸首。请查找所有的ajax jQuery函数：.ajax()，.get()，.post()和内容设置器：.html()，.text()。转到开发工具中的网络选项卡，刷新当前页面10到20次。我通过在我的单页JS应用程序中使用jQuery.load()解决了最近的内存泄漏问题...如果(!jQuery.terms_html) $('#tc_container').load(STATIC_DOMAIN + '/terms.html', function() { jQuery.terms_html = $('#tc_container').html() }) else $('#tc_container').html(jQuery.terms_html) - buycanna.io

Answer 3

在我的应用程序中，jQuery ajax请求是最大的罪魁祸首。定位所有的ajax jQuery函数：.ajax()、.get()、.post()和内容设置器：.html()、.text()。

进入开发工具中的网络选项卡，刷新当前页面10到20次。如果你看到堆积太频繁或调用未完成，那么你就有了内存泄漏问题。

这里是我最近使用jQuery.load()解决的一个内存泄漏问题...

if(!jQuery.terms_html) $('#tc_container').load(STATIC_DOMAIN + '/terms.html', function() { jQuery.terms_html = $('#tc_container').html() }) else $('#tc_container').html(jQuery.terms_html)

此外，在撰写本文时，最新版本的jQuery是3.3.1。如果可能的话，安装最新版本是开始的最佳方式。 https://github.com/jquery/jquery/releases

- buycanna.io