Profiling and Catching Leaks

[jaywhy13]

I need some help conceptually I think to get rid of some javascript woes I'm having. Now I use this mapping tool called kamap. It's a fairly heavy javascript mapping tool like google maps. It's open source.

When the application loads up, the memory for Firefox jumps about 20-30 mbs. By right, when you leave the page... that 20-30 mb leap is supposed 2 disappear. They have a very basic example and it always comes back down. The memory is jumped by is reclaimed.

My application however, is now having a bit of trouble releasing the memory, so I know I have some leaks that I need to get rid of.

So I believe my questions are as follows:
1. How can I use tools like Firebug and it's profiling to rid me of leaks. For example, what exactly does the run time stipulate about a function? What information do they provide that can point me to a possible leak?

2. What's the best way to go about finding these leaks in the first place? Is watching the memory of firefox a good place to start? What tools are there?

[mjlorbet]

use the delete keyword on your instantiated variables.

ie.

 
var myVar = new HugeObject();
//some code here
//...
//all done using myVar
delete myVar;

[jaywhy13]

Can anyone help me out? I need some tips to ensure that I'm not doing anything wrong? How can I adequately check leaks.

[mjlorbet]

add an onunload handler that deletes all your window scope variables, should clear any leaks up (as any variables declared inside functions without explicit window scope should be released on function termination anyhow)

[liorean]

Please note: in JavaScript, the delete operator does not free up memory. What it does is remove a property from an object. In Microsoft's JScript engine, it doesn't even do that - it just marks the property as having been deleted. You should always null out the value of the property in JavaScript if you want to ensure there are no references to it that are keeping it live across garbage collections. Using delete may kill the last reference in some engines, but that is not a guaranteed mechanism, so don't use delete thinking that's what it does.

Oh, also, regarding mjlorbet's example in particular: delete can explicitly NOT remove variables declared with var. It can only remove properties from objects*, it CANNOT remove variables.

In other words:
delete myVar; --> myVar=null;




* Including the global object, as long as the property is not {DontDelete}, which it is if it was declared using the var keyword in global scope.

[mjlorbet]

it doesn't remove them, but it does set their value to undefined

[liorean]

Originally Posted by mjlorbet

it doesn't remove them, but it does set their value to undefined

Let me prove that it removes them:

var o={a:'a'};
alert('Does o contain a? '+(('a' in o)?'yes':'no'));
alert('Successful deletion of a from o? '+((delete o.a)?'yes':'no'))
alert('Does o contain a? '+(('a' in o)?'yes':'no'));

It does NOT change the value (and whether the value is changed or not is actually not visible to the script programmer, though it IS visible for the application programmer that use the scripting engine in his programs) - removing a property from an object does only mean that the property slot is no longer considered present the object. In some engines this may mean the property is actually removed. In some engines it may mean that the mapping from name to slot is removed. In some engines it may mean that the property is still there but explicitly marked as deleted so as to *appear* to not be there any more. That does not mean the property slot is actually removed from the object, or that the contents of that slot are changed. If a lookup for a property that does not exist on an object is made, the returned value is undefined, not the value of the property slot. For this reason, it may look as if the property has been set to undefined. That is not what actually happens though.

Edit: Oh wait, you were talking about variables here, not object properties. Never mind then. Let's prove that variables are not set to undefined instead.

<script type="application/ecmascript">
var
    t=true;
alert('Is t defined? '+((typeof t!='undefined')?'yes':'no'));
alert('Successful deletion of t? '+((delete t)?'yes':'no'));
alert('Is t defined? '+((typeof t!='undefined')?'yes':'no'));
</script>

This test will give a different result if run in eval however, because variables declared in eval are not set to {DontDelete}.

Edit: And just for my point about the distinction between properties of the global object and global variables, compare the result of my last code sample with the results of this code sample:

<script type="application/ecmascript">
t=true;
alert('Is t defined? '+((typeof t!='undefined')?'yes':'no'));
alert('Successful deletion of t? '+((delete t)?'yes':'no'));
alert('Is t defined? '+((typeof t!='undefined')?'yes':'no'));
</script>

Since a global variable t does not exist, a new property t of the global object is created. Since this is plain property of a normal object and not a variable, it is not {DontDelete} and in difference to the global variable, it may be deleted.

[mjlorbet]

fair enough.