Saturday, April 18, 2009

jQuery Leaking Memory:-Be careful while using in big applications

jQuery is very small and useful javascript library which is a must for every developer related to web. I also have used jQuery in my applications a lot, but recently i found that jQuery is leaking memory which is causing trouble to my applications,so be careful while using your selectors and creating dynamic DOM elements by using jQuery.In this article i will discuss the simple ways to track the memory leak in your application and comments related to optimizing and reducing the memory leaks using jQuery are always welcome.

How to detect the memory leak in your web application

There is a very simple tool available on web known as "Drip" which can help you to test the memory leaks in your web applications

You can download drip from

http://www.outofhanwell.com/ieleak/Drip-0.5.exe

Documentation of drip is available at

https://ieleak.svn.sourceforge.net/svnroot/ieleak/trunk/drip/docs/index.html

Drip can catch the memory leaks inside the boundary of Internet Explorer but not outside its boundary.

A typical run on one of my applications which is fully jQuery dependent gives me these results.

What Drip does is that it unloads the page and checks for the memory leaks which remained even after the page was unloaded.

Given below is the drip test on jQuery.com

As you can see that jQuery.com also have some memory leak which seems to be a bug to me in jQuery code itself.

On some research on net i found that commenting out few lines of code in the jQuery itself can reduce some of the memory leaks in your application but still the memory leak is there and doesn't leave you, might be in future we get some bug fix on this memory leak thing from the jQuery team.

The lines of code commenting which can do little magic is found inside the jQuery library

if ( div.attachEvent && div.fireEvent ) {
		div.attachEvent("onclick", function(){
			// Cloning a node shouldn't copy over any
			// bound event handlers (IE does this)
			jQuery.support.noCloneEvent = false;
			div.detachEvent("onclick", arguments.callee);
		});
		div.cloneNode(true).fireEvent("onclick");
	}

If any one of you have some other tips and tricks to reduce this memory leaking and any other way to prevent it.Do post comments to help the community and also help a lot of jQuery developers and jQuery itself to be a bug free library.

Happy Programming!!!

8 comments :

Danny Tuppeny said...

There's a discussion on the jQuery dev list:

http://groups.google.com/group/jquery-dev/browse_thread/thread/d127129441e26e52

I don't think commenting out the code you posted is a good idea - I believe John Resig mention it only to identifier if that's where the leaks come from. I beleive without the code jQuery if you clone things in IE you and alter the vent handlers, it may affect the source nodes.

Anonymous said...

More like Internet Explorer leaks memory through crappy implementation.

Brandon Aaron said...

I just checked in a fix for the memory leaks created at runtime by jQuery. Meaning you won't have to comment out that code. :)

Aashish said...

@Bradon
Great!
Could you please elaborate more on the fix or provide the readers with some link to your blogpost as what exactly you changed.

Thanks anyways

Brandon Aaron said...

Just simply needed to null out the orphaned div element. Added the following line to jQuery.support:

// release memory in IE
div = null;

Hozi said...

Great article that aggregates fixes to all the various jQuery memory leaks due to UpdatePanel refreshes at https://www.quattrosource.com/2009/07/fixing-jquery-memory-leaks-in-asp-net/

Anonymous said...

Check out this article
http://www.codeproject.com/KB/ajax/jqmemleak.aspx

Stream Direct said...

I would like to thank you for the efforts you have made in writing this article. I am wish the same best work from you in the future as well kind regards.

Post a Comment