Fixing Leaks

From Drip IE Leak Detector

Contents 1 Fixing Leaks 1.1 Closures 1.2 Expandos and Circular References 1.3 Pseudo-Leaks

Fixing Leaks

There are two common causes of memory leaks.

Closures

This code will cause a memory leak:

function loadMyPage() {
   var elem = document.getElementById('myelement');
   elem.onclick = function () {
      window.alert('hi!');
   };
}

To solve this, you could add:

   elem = null;

Or, you could refactor the code somewhat:

function onMyElemClick() {
   window.alert('hi!');
}
function loadMyPage() {
   var elem = document.getElementById('myelement');
   elem.onclick = onMyElemClick;
}

Expandos and Circular References

This code contains a circular reference and will cause a memory leak:

function Helper(elem)
{
    this.elem = elem;
}
var elem = document.getElementById('elem');
elem.helper = new Helper(elem);

Circular references with other elements will also leak. For example:

var parent = document.getElementById('parent');
var child = document.getElementById('child');

// make it easy to find one from the other
parent.other = child;
child.other = parent;

To resolve these leaks, you must ensure that the elements do not cross-reference each other, either directly or indirectly.

Pseudo-Leaks

Sometimes Internet Explorer keeps items in memory after the page is done using them. Although these pseudo-leaks are freed after the user leaves the page, some web pages may be open for long periods of time.

To avoid pseudo-leaks, do not use removeChild to remove elements. Instead, set the parent's innerHTML to "" or use a function like this:

function discardElement(element) {
    var garbageBin = document.getElementById('IELeakGarbageBin');
    if (!garbageBin) {
        garbageBin = document.createElement('DIV');
        garbageBin.id = 'IELeakGarbageBin';
        garbageBin.style.display = 'none';
        document.body.appendChild(garbageBin);
    }

    // move the element to the garbage bin
    garbageBin.appendChild(element);
    garbageBin.innerHTML = '';
}