JS 内存溢出，调试工具介绍

说明: 本篇内容摘自本站一位仁兄的，在这里加贴是为了做点补充并上传附件方便后来的朋友下载和学习。

   javascript内存泄露的问题一直以来都不受到大家的重视，原因是对用户的影响没有太实际的表现，或许近几年内存发展迅速。脚本内存再泄露也不会有太大影响。

当然作为前端开发的同学们，就不能有这样的侥幸心理。出现memory leaks很大程度上是因为程序的不成熟和编码不太规范造成的。不过，这里就不说如何出现问题的，对问题的出现有兴趣可以参考以下地址：

•Understanding and Solving Internet Explorer Leak Patterns
•IE's memory-leak fix greatly exaggerated
•Memory Leakage in Internet Explorer – revisited


这里主要说说，目前几个检查javascript内存泄露的工具使用方法:

首先我们用到的工具有三个 Drip/sIEve ,Javascript Leaks Detector, leak monitor。其中前两个是用于检查ie的，leak monitor 是用来检查firefox的情况的。这里重点说一下ie下的这两个工具，由于firefox的GC机制比ie强壮，只要ie的问题消除了，其他浏览器基本上不会有什么问题。


1.Drip/sIEve

Drip和sIEve的作者应该是同一个人，连open souce上的项目都是在一起的。不过，平时我们主要使用sIEve就可以了，sIEve的功能比Drip强大一些


sIEve 界面很简单，左侧：内嵌了一个浏览器控件，我可以访问任何网址，下方还有个内存检查，这样我们可以方便看出内存的升降情况以及dom使用数量曲线。

右侧面板，我们可以通过 Show in use 看到目前页面使用的dom的情况，Show Leaks 可以看到内存泄露的dom。当然每次显示泄露的情况必须是页面刷新后，看到上一个页面的泄露情况。

同时通过右侧的数据颜色，我们可以看到内存的升降和具体的数量级
      •
不过sIEve的工作原理是对所有dom进行了一次hack,然后自己判断那些dom没有被释放掉，但是具体的情况比较难分析出来。而且跟踪有问题的dom需要一定技巧，对于大型的应用程序，跟踪难度大。


不过用来检测小模块的内存使用情况还是一个不错的选择，特别是大项目模块细分后，对每个模块的单独测试还是比较不错的


谢谢怿飞同学提示的下载地址, Drip/sIEve下载地址:
http://home.orange.nl/jsrosman/

2. Javascript Leaks Detector

这是来自微软GPDE团队的一个小工具,下面简称JLD

官网: http://blogs.msdn.com/gpde/pages/javascript-memory-leak-detector.aspx

安装后，我们可以在ie浏览器的 查看->浏览器栏中找到

JLD强大之处在于能够模拟IE6和IE7的GC情况，和真实的回收情况。这样可以做一个比较。

 
这里通常能只能反应IE6和IE7的理想情况，我们需要选择下面Actual Leaks来反映当前浏览器的真实情况。


浏览器刷新后，我们就可以看到上次页面的结果了，绿色代表没有发现内存泄露，红色代表发现了内存泄露，蓝色是当前加载完成的页面，当然还有黑色，是指正在加载的网页

当我们展开一个有问题的页面时，


我们可以看到一个有问题分支Leaks.这里列出了有问题的节点，同时还能帮我们列出出现问题的脚本在什么地方。


这点非常方便我们定位出泄露的问题所在。不过要使用脚本调试，我们必须要打开ie的脚本调试功能


在ie选项的高级中，我们去掉这两个勾即可

3. Leak Monitor

这是firefox上唯一一个检查内存泄露的工具，不过这里舜子不太推荐使用。因为firefox的内存GC机制比IE强悍，不必作为重点考虑对象。只要 ie的问题能处理好，firefox上基本上也没有什么问题。而且有ie这两个强悍的软件帮忙基本上能解决大部分问题了。

可惜这个工具的体验很糟糕，会让人很有一种抓狂的感觉。如果您还要继续尝试可以到这里下载: https://addons.mozilla.org/zh-CN/firefox/addon/2490

以下是关于JavaScript Memory Leak Detector 的使用与介绍

Introduction
JavaScript Memory Leak Detector (download) is a debugging tool to detect memory leaks and enforce best practices in JavaScript code when working with version of Internet Explorer older than IE8.

As described in detail in this MSDN article the JScript garbage collector in previous versions of Internet Explorer manages the lifetime of JScript objects but not of DOM objects. As a result, the JScript garbage collector cannot break circular references between DOM objects and JScript objects, and memory leaks may occur.

In IE6, these circular references are broken when the Internet Explorer process terminates (and leaks are very frequent).
In IE7, these circular references are broken when users navigate away from the page.
In IE8 the problem is completely mitigated. (Read here for more details).
Programmers who need to support older versions of the Internet Explorer browser should still try to pay attention to programming patterns such as JScript closures, as they could cause memory leaks.

The leak detector works hosting an IE WebBrowser control and intercepting the execution of JavaScript inside IE. It monitors al the DOM elements in the markup of a web document that somehow interact with JavaScript and presents a list of potentially leaked objects to the user, together with information about the scripts loaded in the page and, if possible, a hint to the instruction that may have caused the leak.

Installation notes
IEJSLeaksDetector is a plain, native, Windows application and does not require any particular setup (the executable can be just unzipped and run).
It only runs in 32 bit versions of Windows. 64 bits editions are not supported yet.

There are only two installation steps required to make sure that the tool works correctly:

1. The tool requires that the pdm.dll script installer is installed in the machine. This DLL is normally installed with any version of Microsoft Visual Studio.In case you are unable to install Visual Studio in the target machine, a simpler way to install pdm.dll is by installing the Microsoft Script Debugger, freely downloadable here.

2. The tool also requires Internet Explorer script debugging to be enabled to work correctly. Verify that the check box "Disable script debugging (Other)" is unchecked, in IE ('Tools' menu -> Internet Options -> 'Advanced' tab -> 'Browsing' section) as shown in figure.

How to use the tool
The user can start the memory profiling of a web application navigating to the desired URL. A new tab is opened with a WebBrowser control and a tree view shows all the documents and scripts that compose the current page.
When the user has finished to interact with the page he can click the "Stop" button, which causes the tool to close the control and track possible leaks.
Memory leaks are listed specifying the DOM object's type and a list of "attached" JavaScript objects whose circular reference could be the cause of the leak. The tool also shows the call stack correponding to a memory leak, which represents the state of the script at the moment when the JavaScript object was attached to the DOM object. Finally, a script window highlights the exact point in the JavaScript code where the memory leak originated.
More information can be found in the docs enclosed with the binaries.


Posted: Monday, August 03, 2009 11:28 AM by eurojobs
Filed under: JavaScript, Internet Explorer, Debugging tools
Comments
nora said: 
Thank you new version release!

so,is JavaScript Memory Leak Detector (v2) supported protetype.js which isn't supported by previous version ?

thanks.

# September 1, 2009 8:15 AM
eurojobs said: 
nora,

Thanks for your interest!

I don't have 'protetype.js' to run a test, but the new version should be considerably more stable than the previous one.

But please, let me know if you find any problem.

# September 1, 2009 9:35 AM
New Comments to this post are disabled