追踪 JavaScript 内存泄漏的工具答案

【问题标题】：Tool to track down JavaScript memory leak追踪 JavaScript 内存泄漏的工具
【发布时间】：2012-08-11 17:37:04
【问题描述】：

我有一个 Web 应用程序在某处发生内存泄漏，我无法检测到它。我已经尝试过通常运行良好的 Chrome 开发人员工具，但我无法找到负责的代码行。 Chrome 工具只是给了我太多信息，我无法将内存中的对象与我的代码相关联。

还有其他可能有用的工具吗？

【问题讨论】：

Tools for debugging memory leaks in JavaScript 的可能重复项

标签： javascript memory-leaks google-chrome-devtools

【解决方案1】：

更新： 让我们使用 Record Heap Allocations 配置文件类型。

打开 devtools 分析器
做一个热身动作
启动分析器
重复操作几次
如果操作有泄漏，您将在概览窗格中看到相同数量的蓝色条组
停止分析器
在概览中选择一组蓝色条
查看对象列表

查看截屏视频Javascript Memory Leak detection (Chrome DevTools)

曾经： 您可以使用下一个场景来解决内存泄漏问题。

打开 devtools 分析器
执行导致泄漏的操作
拍摄堆快照
重复步骤 2 和 3 树次
选择最新的堆快照
将过滤器“所有对象”更改为“快照 1 和 2 之间的对象”

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

【讨论】：

通常您只知道是谁将泄漏的对象添加到容器中，因为它是您的代码。但是，如果您不知道这一点，那么您可以使用泄漏对象类的新构造函数覆盖构造函数，该构造函数记录堆栈跟踪并直接从控制台调用原始构造函数。重复这些步骤并查看分配堆栈跟踪的对象。它可以让你知道泄漏对象的来源是什么，以及哪些代码应该消除对泄漏对象的最后敬意。

【解决方案2】：

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

【讨论】：

jQuery ajax 请求是我的应用程序中最大的罪魁祸首。找到所有 ajax jQuery 函数：.ajax()、.get()、.post() 和内容设置器：.html()、.text()。转到开发工具中的网络选项卡，将当前页面刷新 10 到 20 次。我在我的单页 JS 应用程序中使用 jQuery.load() 解决了最近的内存泄漏...@987654323@

【解决方案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

【讨论】：