Having difficulty using IE Javascript leak detectors

Question

Microsoft's IE6 and IE7 browsers suffer from memory leaks when certain Javascript code patterns are used. I've found lots of information on what the leak patterns were, back in early IE6 days. However, I understand that many (but not all) of these were fixed in IE7 and in a service pack for IE6. I can't find a reliable source of information on what leaks still remain in those patched versions of IE6 and IE7.

There are a couple of tools to detect leak patterns. But I can't seem to be able to use them the way I want!

• Microsoft's (V2) memory leak detector finds no leaks at all in my code even when I use patterns that should leak. This may be because I am running IE8 - is there any non-headachy way to get it to pretend to be IE6 or IE7?

• Drip and sIEve seem to find tons of leaks of the "orphan" variety. Surely these must be false positives - virtually every element I add to the document then remove again are listed, and I don't believe I keep references to them. And if they are real, how can I find where in my code they are leaking? The tools have a 'properties' feature which shows nothing, making it seem broken. Again, I have no idea whether these leaks are relevant for IE6 or IE7, or just for IE8, which is the version of IE I have installed.

So I'd really like to know what types of memory leaks are still an issue with patched versions of IE6 and IE7, and how to effectively find them in my live code using tools to help me.

Any help?

Answer 1

I don't think there is an effective tool to detect memory leaks. There is a piece of software, however, that you can use to emulate IE 6-7-8 on your PC, it's called IE Tester.

The most common leak Internet Explorer had is an interaction with JScript.

When a DOM object contains a reference to a JavaScript object (such an event handling function), and when that JavaScript object contains a reference to that DOM object, then a cyclic structure is formed. - http://javascript.crockford.com/memory/leak.html

This cyclic structure is what IE has hard times dealing with. You should understand how cyclic references are formed (via closure). The first step would be do clean your DOM elements before you remove them.

This can be done by a general function like this:

function purge(d) {
    var a = d.attributes, i, l, n;
    if (a) {
        l = a.length;
        for (i = 0; i < l; i += 1) {
            n = a[i].name;
            if (typeof d[n] === 'function') {
                d[n] = null;
            }
        }
    }
    a = d.childNodes;
    if (a) {
        l = a.length;
        for (i = 0; i < l; i += 1) {
            purge(d.childNodes[i]);
        }
    }
}

Every time you remove elements from the DOM you need to use purge on it first. You can even write a wrapper for that

function safeRemove(el) {
  purge(el);
  el.parentNode.removeChild(el);
}

Of course it's just a starting point, as it won't help you with references in other places (like DOM2 event handlers, or anywhere else though closure). You should check the places where you remove elements, and find out what functions reference them.

This problem seems to still exist in IE 6-7-8.