How can I control IE6+jQuery+jQuery-ui memory leaks?

Question

I hate to say this, your approach is correct and professional, but I'd be tempted to just leave it.

The consequences of not fixing this is that IE6 users will notice their machine getting slower and slower and ultimately either crashing completely or more likely crashing IE6.

So what?

Really - why is this your problem?

Yours definitely won't be the only site they visit with this leak, and they will see IE6 crash regularly regardless of what you do, because that's what it does.

It's unlikely that anyone still on IE6 could even point out your application as one that leaks.

Finally when IE6 does crash it reports IE6 as the culprit - you can legitimately point out that this is a bug in IE6 that Microsoft have fixed in a new release.

Your expensive time is better spent on improving the application for the users not trapped in legacy hell - your app should basically work for IE6 users, but this sort of issue can suck away all of your time and not fix their problem. IE6 is still going to be an unsupported, crash ridden, security hole of a browser.

I suspect the jQuery devs take a similar view to me. Also you have to do some really ugly stuff to get round this bug in IE6, including hacky DOM work that stops the leak but is actually much slower.

---

Update

Ok, this isn't an easy problem to fix - MS describe the IE6 bug (and provide advice on how to fix it) here: http://msdn.microsoft.com/en-us/library/bb250448(VS.85).aspx

Basically this isn't a problem with javascript or jQuery - the actual issue is with the IE6 DOM - when HTML elements are added to the page (by javascript, rather than being in the page when it loads) IE can't garbage collect them unless they are created in a very specific way.

This is back to front from how jQuery UI builds elements (see DOM insertion order bug in the link above) and so this isn't something that either the jQuery devs or you can easily fix.

So how do you fix the issue? Well, you can stick with the legacy pop-up calendar for IE6 or you can write your own one.

I would recommend the former, but if you really want to built the latter there are some basic rules to follow:

1. Always add elements top-down - for instance if you want to built a table add the <table> element into the page's DOM, then add <tr> then <td> and so on. This is back to front as it's much quicker to build the entire table and then add it to the DOM - unfortunately that's where IE6 loses track of it.

2. Only use CSS and HTML 3.2 attributes - sounds dumb, but IE6 creates extra objects to store the extra attributes (or 'expando' properties) and these also leak.

3. Kinda related to (2), but as @gradbot mentions IE6 has problems garbage collecting javascript variables - if they reference a DOM element inside an event fired from that element you can get problems. This is also compounded by javascript references to DOM elements that have 'expando' properties.

If you have a look around online there may already be a drop-down DHTML calendar that sticks to these rules - it won't be as pretty, quick or configurable as the jQuery UI one, but I'm sure I've seen it done without leaking in IE6.

I think the best bet is to keep as much static as possible - for instance you could load the calendar grid (week numbers and day column headings) with the page and then dynamically load in the numbers (and nothing else). Create the day numbers as links, with javascript in the href - not best practice normally but far less likely to leak in IE6.

It's obvious that the problems you've been describing stem from a flaw in IE6 that you can't subvert with a software fix (be it a jQuery update, a manual call to CollectGarbage, or some other JavaScript/DOM hack).

There are 3 options, in my mind, that would fix this problem.

1. I would imagine that your customers/users are using IE6 SP0 because of some company standard or regulation, or even because some older web-app they still use doesn't support newer browsers. If it's not an option to upgrade to IE7 (or therefore IE8), you could get in contact with your customers' IT department and politely point out that updating IE6 with the latest service packs would not only fix a problem with an application that they are paying for, but also patch many security and performance flaws that undoubtedly exist in IE6 SP0. Admittedly, that might not be a comfortable situation, but it might solve the problems you are encountering, while still allowing them to work with a browser that require for whatever reason.

2. If you can convince your customers' IT department that IE6 is antiquated, they may be willing to allow your users to upgrade to a newer browser. It's not a stretch to say that someone running an IT department would be more willing to force employees to upgrade a piece of software if they knew it was either a) riddled with flaws and security holes or b) approaching its end of support date (as IE6 SP0 is). IE6 SP0 on XP Pro SP2 is supported until July 13, 2010 - so it still has some time, but pointing that out, along with other flaws/limitations you could find might make them think seriously about upgrading sooner rather than later.

3. If you can't convince anyone to upgrade their browsers either to IE6 SPX, or to IE7/8, then I don't know if you have a choice but to remove the offending control from your page, and pursue a different option until the user's browser permits it. There are assuredly many implementations of a date picker control available online which would suit your needs. It might not be as snazzy as the jQuery version, but you don't have many other options at this point.

I hope you find a solution!

try deleting these objects after destroying the datepicker object:

$.datepicker = null;
$.fn.datepicker = null;

This problem is either in a IE6-only part of jQuery, or in a general part of jQuery that is lacking IE6 especific code (as noted in the comments). Either way, it's still a bug in jQuery that needs addressing. about:blank You'll either have to dig yourself into jQuery or file a bug ticket. If you manage to fix it, don't forget to attach a diff to the bugtracker, so the project gets a little bit better. ;)

If I get some spare time, I'll try to help you with this.

Edit

Ok, so the problem seems unsurmountable.

The leak you are facing is an IE 6 SP 0 only problem, a leak caused by IE's approach to DOM. Doesn't matter what JS framework you use, it refuses to work correctly.

So, your current options are:

• Die trying to get your users to upgrade IE 6 to a newer version/Service Pack,
• Die (as in leak) in IE (loosing customers) or
• Die trying to work on IE.

But that doesn't necesarily means you can't work this out. What about just trying to side pass the wole thing?

Show every non IE 6 SP 0 user the jQuery datepicker, and only IE 6 SP 0 another more resilient (and probably basic) datepicker with IE's conditional comments. This way you can keep the eye candy/functionality in your software, and allow IE 6 users to have the same basic functionality.

It might not be such a clean option, but you'd still be able to use what you want, and IE6 will still be able to work without leaking.

The only problem will be that you'll have a bigger burden, by having to degug two distinct datepickers. But you'll have to debug IE 6 anyway so, it may be your best bet at the moment.

The problem with IE 6 is that it has two garbage collectors. One for JavaScript and one for the DOM. So for example if you attach a function to a DOM event and then delete the DOM element the function will still exist in memory.

Check out this slide show. It's a bit tongue in cheek but it's good information.

They fixed this issue in IE 7. I tried your page in IE8 in windows 7 and I'm not seeing a memory leak.

The problem here lies a bit deeper than 'just' jquery. Jquery along with many other browsers "leak" circular references between DOM objects and object listeners. Say you have an input field that has attached to it a listener, then you remove the element from the dom and do not have any reference to the listener in your code. Now any modern browser (>=ie7, ff, chrome, safari, opera) will live with that and garbage collect it, while IE6 will think that because there is a listener attached to a dom element it should not garbage collect the dom and the listener itself.

To get around that some folks use very complicated design patterns as highlighted for example in events code in Google Doctype. To fix the problem for IE6 you would really need to rewrite a portion of jquery to work around IE6 issue and/or switch to using a different library and/or not attach any event listeners in your application to DOM events.