用于跟踪JavaScript内存泄漏的工具

Question

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

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

Answer 1

<强>更新 让我们使用记录堆分配配置文件类型。

1. open devtools profiler
2. 做一个热身活动
3. 启动探查器
4. 重复几次动作
5. 如果操作有泄漏，您将在概览窗格中看到相同数量的蓝条组
6. 停止探查器
7. 在概述中选择一组这些蓝条
8. 查看对象列表

请参见截屏视频Javascript Memory Leak detection (Chrome DevTools)

<强>是： 您可以使用下一个方案来消除内存泄漏。

1. open devtools profiler
2. 做一个泄漏的行动
3. 拍摄快照
4. 重复步骤2和3树时间
5. 选择最新的堆快照
6. 将过滤器“所有对象”更改为“快照1和2之间的对象”

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

Answer 2

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

Answer 3

jQuery ajax请求是我应用程序中最大的罪魁祸首。找到你所有的ajax jQuery函数：.ajax（）,. get（），。postt（）和内容setter：.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