Megoldások memóriaszivárgás elkerülésére

A memóriaszivárgás két módon kerülhető el:

Megelőzzük a körkörös hivatkozás létrejöttét COM és JavaScript-objektum között

Leggyakrabban körkörös hivatkozás lezárás miatt jön létre, így ha nem használunk egymásba ágyazott fügvényeket, akkor a lezárás sem jöhet létre. 

function CreateDivs(){
        var oBigObject = new Array(1000).join(new Array(200).join("XXXXX"));

        for(var i = 0; i < 50; i++){

            var el = document.createElement('div');
            el.id = 'myDiv'+ i;
            el.className = 'box';
            el.onclick = Div_clicked;

            document.getElementsByTagName('body')[0].appendChild(el);
        }
    };
    function Div_clicked(){
        this.style.backgroundColor = 'red'; 
    }
    window.onload = function(){
        CreateDivs();
    }

A következő megoldás egy újabb lezárást használ. Ez a megoldás nem nevezhető jó praktikának, mivel nehezen olvashatóvá teszi a kódot, és egy újabb lezárás csak feleslegesen lassítaná a teljesítményt. 

window.onload=function outerFunction(){
    var anotherObj = function innerFunction(){
        alert("Elkerültem a szivárgást!");
    };
    
    (function anotherInnerFunction(){
        var obj = document.getElementById("element");
        obj.onclick=anotherObj;
    })();
};

Saját magunk explicit módon felbontjuk a létrejött körkörös hivatkozást COM és JavaScript-objektum között

window.onload=function(){
    var obj = document.getElementById("element");
    obj.onclick=function(evt){
    …
    };
    obj = null; // körkörös objektum referencia hivatkozás felbontása
};
körkörös hivatkozás megszüntetése

Jól bevált megoldás, hogy miután már nincsen szükség az általunk írt eseménykezelő függvényeinkre, sorra leszereljük őket. Ezt legkésőbb a weblap unload eseményének bekövetkeztekor kell megtenni. Valamennyi COM objektumhoz csatolt hivatkozást az eseménykezelő függvényeinkre megszüntetjük. Azaz, sorra null értéket rendelünk a COM objektumok megfelelő tulajdonságaihoz (például: onclick, onchange,…). 

function CreateDivs(){
    var oBigObject = new Array(1000).join(new Array(200).join("XXXXX"));

    for(var i = 0; i < 50; i++){

        var el = document.createElement('div');
        el.id = 'myDiv'+ i;
        el.className = 'box';
        el.onclick = function(){
            this.style.backgroundColor = 'red'; 
        };
        document.getElementsByTagName('body')[0].appendChild(el);
    }
};
window.onload = function(){
    CreateDivs();
};

// rendet rakunk magunk után
window.onunload = function(){
    for(var i = 0; i < 50; i++){
        var el = document.getElementById('myDiv'+ i);
        if (el){
            el.onclick = null; // hivatkozás megszüntetése
        }
    }
};

Hátránya a megoldásnak, hogy számon kell tartanunk, mely COM objektumokhoz és milyen attribútumaihoz rendeltünk eseményt. Az oldal onunload esemény bekövetkeztekor pedig valamennyi COM objektumhoz rendelt eseményt meg kell szüntetni. Ha csak egy eseményt is elfelejtünk leszerelni, az oldal memóriát fog szivárogtatni, persze nem túl sokat.

Sok kliens oldali JavaScript osztálykönyvtár saját megoldást kínál eseményvezérelt programozáshoz. Az ilyen osztálykönyvár által nyújtott segédfüggvényeknek az az előnye, hogy elfedi a böngészők különböző implementációjából fakadó különbségeket. Ilyen például a Yahoo ingyenes Yahoo! UI Library (YUI) kliens oldali osztálykönyvtára is. A YUI esemény komponense (YAHOO.util.Event) gondoskodik helyettünk arról is, hogy az általunk regisztrált eseménykezelő függvényeket az oldal elhagyása előtt (az oldal onunload eseményének bekövetkeztekor) sorra lekapcsolja. 

function CreateDivs(){
    var oBigObject = new Array(1000).join(new Array(200).join("XXXXX"));
    var fncDiv_clicked = function(){
        this.style.backgroundColor = 'red';
     };

    for(var i = 0; i < 50; i++){
        var el = document.createElement('div');
        el.id = 'myDiv'+ i;
        el.className = 'box';
        YAHOO.util.Event.addListener(el,"click", fncDiv_clicked);
       document.getElementsByTagName('body')[0].appendChild(el);
    }};

window.onload = function(){
    CreateDivs();
};

A memóriaszivárgások felderítésében segítségünkre lehet a Firefox Leak Monitor bővítménye ill. Az Internet Explorerhez írt IE Leak Detector.