A memóriaszivárgás leggyakoribb okai

A jó hír az, hogy a memóriaszivárgás elkerülhető, amennyiben tudjuk mire kell odafigyelnünk. Csekély többletmunkával a legtöbb memóriaszivárgás kiküszöbölhető.

A teljesség igénye nélkül következzen a leggyakrabban előforduló memóriaszivárgási mintáknak az ismertetése. Ezek ismeretében könnyebben tudjuk majd saját, vagy más kódjában megtalálni és kijavítani a memóriaszivárgás tekintetében veszélyes kódrészeket.

Körkörös hivatkozás DOM-objektum és JavaScript-objektum között „expando” attribútumon keresztül

Mint tudjuk a DOM-objektumok különféle tulajdonságokkal bővíthetők. Az angolban az ilyen bővítmény tulajdonságokat „expando”-nak nevezzük. Primitív adattípusok (szám, boolean, karakterlánc) tárolása DOM expando attribútumokban veszélytelen. Komplex adattípusok (objektum, függvény) esetében azonban ajánlott óvatosnak lenni, hiszen az ilyen adattípusok referenciát tartalmazhatnak magára a DOM objektumra (körkörös hivatkozás). Nem ritka például, hogy expando tulajdonságot rendelünk egy DOM objektumhoz abból a célból, hogy a végrehajtási környezetet megtartsuk illetve, hogy a DOM objektum egy eseménykezelő függvényéből hivatkozhassunk egy JavaScript-objektumra.

function Button(){

    this._constructor = function(oParentElement){
        var oBtn = document.createElement('div')

        this.id = sId;
        this.button = oBtn;
        this.nbOfClicks = 0;

        oBtn.id = this.id;
        oBtn.className = 'button';
        oBtn._buttonObj = this;
        .
        .
        oParentElement.appendChild(this.button);
    };

    var button_clicked = function(e){
        var self = this._buttonObj;
        self.nbOfClicks++;
    }

    this._constructor.apply(this, arguments);
}
new Button(document.getElementsbyTagName(body)[0]);

Körkörös hivatkozás DOM objektum és JavaScript-objektum között

Körkörös hivatkozás DOM objektum és JavaScript-objektum között lezárás miatt

Gyakran a programozó tudta nélkül jön létre körkörös hivatkozás, mivel a lezárást nehezebb felismerni.

window.onload=function(){
    var obj = document.getElementById("element");
    obj.onclick=function(evt){
    …
    };
};

Körkörös hivatkozás jön létre JavaScript-objektum (anonim függvény) és DOM elem közt.

Memóriaszivárgás a leggyakrabban lezárás miatt jön létre, mivel gyakran használunk anonim eseménylekezelő függvényeket.