追踪 JavaScript 内存泄漏的工具
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11969062/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Tool to track down JavaScript memory leak
提问by Preli
I have a web application which has a memory leak somewhere and I am unable to detect it. I already tried the Chrome developer tools which normally works great, but I am unable to track down the lines of code which are responsible. The Chrome tools just give me too much information and I can't relate the objects in memory to my code.
我有一个 Web 应用程序，它在某处存在内存泄漏，但我无法检测到它。我已经尝试过通常运行良好的 Chrome 开发人员工具，但我无法追踪负责的代码行。Chrome 工具给了我太多信息，我无法将内存中的对象与我的代码相关联。
Are there any other tools that might be helpful?
是否有任何其他工具可能会有所帮助？
回答by loislo
update:Lets use Record Heap Allocationsprofile type.
更新：让我们使用记录堆分配配置文件类型。
- open devtools profiler
- do a warm-up action
- start profiler
- repeat action a few times
- if the action has a leak you will see the same number of groups of blue bars in the overview pane
- stop the profiler
- select one group of these blue bars in the overview
- look into the list of objects
- 打开 devtools 分析器
- 做一个热身动作
- 启动分析器
- 重复动作几次
- 如果操作有泄漏，您将在概览窗格中看到相同数量的蓝色条组
- 停止分析器
- 在概览中选择一组这些蓝色条
- 查看对象列表
See screencast Javascript Memory Leak detection (Chrome DevTools)
请参阅截屏视频Javascript 内存泄漏检测 (Chrome DevTools)
was:You can use the next scenario for fining memory leaks.
是：您可以使用下一个场景来解决内存泄漏问题。
- open devtools profiler
- do an action that makes a leak
- take a heap snapshot
- repeat steps 2 and 3 tree times
- select the latest heap snapshot
- change filter "All Object" to "Objects between Snapshot 1 and 2"
- 打开 devtools 分析器
- 做一个泄漏的动作
- 拍摄堆快照
- 重复步骤 2 和 3 树时间
- 选择最新的堆快照
- 将过滤器“所有对象”更改为“快照 1 和 2 之间的对象”
After that you will see objects a set of leaked objects. You can select an object and look at the list of retainers in Object's retaining tree
之后，您将看到一组泄漏的对象。您可以选择一个对象并查看对象保留树中的保留器列表
回答by Paul Sweatte
Use the innerHTML and outerHTML values of the element in the Detached DOM treeview of the Heap Profilerto map objects in memory to your code and track down memory leaks.
使用堆分析器的分离 DOM 树视图中元素的innerHTML 和outerHTML 值将内存中的对象映射到您的代码并跟踪内存泄漏。
回答by decoder7283
jQuery ajax requests were the biggest culprit in my app. Locate all your ajax jQuery functions: .ajax(), .get(), .post() and content setters: .html(), .text().
jQuery ajax 请求是我应用程序中最大的罪魁祸首。找到所有 ajax jQuery 函数：.ajax()、.get()、.post() 和内容设置器：.html()、.text()。
Go to the network tab in dev tools, refresh the current page 10 to 20 times. If you see things stacking up too frequently, or calls not being completed, you have a memory leak.
转到开发工具中的网络选项卡，刷新当前页面 10 到 20 次。如果你看到事情堆积得太频繁，或者调用没有完成，你就有了内存泄漏。
Here is a recent memory leak I was able to solve with jQuery.load()...
这是我能够使用 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)
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)
Also, the latest version of jQuery at time of writing this is 3.3.1. Having the latest version installed is the best way to get started, if possible. https://github.com/jquery/jquery/releases
此外，撰写本文时最新版本的 jQuery 是3.3.1。如果可能，安装最新版本是入门的最佳方式。 https://github.com/jquery/jquery/releases
