IE6 leaks oceans of memory. Great — why should web developers care? Because if you care about your users, you should care about this browser. It is dang ubiqutious. Even a somewhat “tech-savvy” dictionary site of mine has 25% of its users coming in as IE6. Definitely worth caring about.

IE’s problem seems to stem from having two garbage collectors running — one for objects declared with Javascript, and one for the DOM tree (each DOM element is its own COM object). Circular references and closures can really throw IE off. If you’re interested, MS has one of the best articles about fixing its own browser’s memory leaks. There’s even a great tool (“Drip IE Leak detector”) for seeing which DOM elements were leaked by IE6.

Anyway, I spent the entire day today fixing IE6’s memory leaks for one of my projects. This small bug cost me hours and hours, and I haven’t seen it documented anywhere:

When attaching events to a DOM object in IE, you do this:

domElement.attachEvent(eventName,function);

where eventName is something like “onClick”.

When you pass in a non-standard eventName, like “onTest” instead of “onClick”, IE will not garbage collect that domElement. Some Javascript toolkits (like Mootools) allow you to use your own custom events, e.g. drag-and-drop implementations (”onDrag”, “onComplete”). If they eventually pass that event name to attachEvent, there will be a memory leak in IE6.

Working around this bug, I went from 1MB of leaked memory per page load (wow) to <100K. Not bad. Filed as a bug here against Mootools.