myDom = document.createElement('DIV'); //DOM world
myJs = 'foo'; //JS world
myJs.dom = myDom; //First reference
myDom.js = myJs; //Second reference, creating a cycling reference
If you have this code in your page, you will see the corresponding iexplore.exe instance in your task manager increasing memory each time you reload . Here is the leak !
I have tried two things to avoid the leak, one was successfull.
The first thing I tried was to delete the reference from the Js object to the Dom object, writing this :
myJs.dom = null;
It doesn't work! So I decided to delete the reference from the Dom object to the Js Object :
myDom.js = null; // or myJs.dom.js = null;
And that worked. No more memory leak.
In conclusion, I have made up a reference cleaner which would delete Dom reference to Js objects before the page unload. That object is part of the Util class and is defined as follow :
Util.collector = new Array();
Util.collector.register = function(object) {
this.push(object);
}
Util.collector.empty = function() {
for (var i=0; i < Util.collector.length; i++)
Util.collector[i].dom.js = null;
}
each time you create a Js object that will refer to a Dom object, you register it to the collector by calling
Util.collector.register( myJs );
and somewhere in your code, you add :
window.onunload = function() { Util.collector.empty(); }
No comments:
Post a Comment