fighting with IE memory leak

在某个Ajax项目中使用到了[url="http://labs.adobe.com/technologies/spry/"]Adobe Spry[/url]框架。

在项目部署测试中，发现有内存泄露。仔细检查了所有的代码，发现该注意的地方都已经清理过，一时找不到原因。最后突发奇想是不是用到的Spry框架的问题？用测试工具详细分析后表明，Spry的MenuBar组件在IE6下有内存泄露。晕，让Adobe的名号害惨了项目组的同志们，即使最新的1.6.1版本也不例外。最后分析代码表明，这还是那个IE6JS引擎与DOM引擎相互分离的[url="http://msdn2.microsoft.com/en-us/library/bb250448(VS.85).aspx"]老BUG[/url]了，当dom元素绑定到的事件响应函数引用到自身的时候。在page unload的时候，该元素就会成为孤儿，它占用的内存就不会被系统所回收。

经过测试，这个全局的菜单每次会有56个泄露的节点，占用内存200k左右。当页面浏览次数增加时，甚至会有数十M的内存泄露！

找到了问题的所在，那么解决起来就很容易了。hack部分代码，解决内存泄露。项目顺利验收...

在注册事件响应时，把匿名函数绑定在该元素上

Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
{
	try
	{
		if (element.addEventListener)
		{
			element.addEventListener(eventType, handler, capture);
		}
		else if (element.attachEvent) //IE6 needs more to handle memory
		{
			element.attachEvent('on' + eventType, handler);
			if(!element._handlers) element._handlers = [];
			element._handlers['on' + eventType] = handler;
		}
	}
	catch (e) {}
}

增加一个clearLeak方法，在onload事件中清除这些绑定。

Spry.Widget.MenuBar.clearLeak = function(menu)
{
	if(!Spry.is.ie)return;
	alert('reged with' + menu.element.id);
	window.attachEvent('onunload', function(){
		//alert('recycling...');
		var recycler = document.createElement('div');
		var element = menu.element;

		loopLeak(element);

		function loopLeak(object)
		{
			var children = object.childNodes;
			if(children.length > 0)
			{
				for(var i in children)
				{
					var child = children[i];
					if(child && child.nodeType == 1)loopLeak(child);
				}				
			}
			if(object && object._handlers)
			{
				for(var index in object._handlers)
				{
					var handler = object._handlers[index];
					object.detachEvent(index, handler);
				}
				var a = object.attributes, i, l, n;
				if (a) {
					l = a.length;
					for (i = 0; i < l; i += 1) {
						n = a[i].name;
						if (typeof object[n] === 'function') {
							object[n] = null;
						}
					}
				}
				object._handlers = null;
			}
		}
		//alert('recycling...done');
		element = null;
	});
}

最后在构造方法中，绑定menubar实例与清除函数。完成。

Spry.Widget.MenuBar.prototype.init = function(element, opts)
{
	//...ommitted
		if(Spry.is.ie)
		{
			//... 
 			Spry.Widget.MenuBar.clearLeak(this);
		}
	}
};

参考文章：
[url=http://javascript.crockford.com/memory/leak.html]JScript Memory Leaks[/url]
[url=http://msdn2.microsoft.com/en-us/library/bb250448(VS.85).aspx]Understanding and Solving Internet Explorer Leak Patterns[/url]
[url=http://siteexperts.spaces.live.com/Blog/cns!1pNcL8JwTfkkjv4gg6LkVCpw!338.entry]Closures and IE Circular References[/url]