What is the best way to free browser memory when working with large arrays in javascript?

Question

This is how I have things setup:

• container.html
• database1.js (contains large array called database1)
• database2.js (contains large array called database2)

Here's a sample of the array (shortened from 6000+ rows to 2):

var database1=[[
    "2010-01-03 07:45","2010-01-03 11:00","534","A","","","","","Installed washing machine","0","1","1","Indeed","",""],[
    "2010-03-20 15:00","2010-03-20 16:00","571","F","","","","","Installed oven","0","5","1","Indeed","",""],[
    etc,etc,etc...]];

When I append database1.js to the head on the container the memory used for IE in windows jumps from 7,7MB to 21,9MB. This is fine, I can now loop though the array called database1 (first row and column is at database1[0][0]).

The problem is that I need to re-append the database file from time to time and in doing so the memory usage increases (I thought the database array would be overwritten).

So the first re-append pushes memory usage in IE up to 30,4MB but then continues to increase on each re-append: 30,4MB > 33,9MB > 39,5MB > 42,1MB etc.

To prevent this from happening I now clear each item in the array before I re-append the database1 file.

for ( var i=0, il=database1.length; i<il; i++ ){
delete database1[i];
}
//append database1.js to head code here

This does help. The memory usage doesn't decrease to the initial 7,7MB but does however decrease from 21,9MB to 14,1MB. The next re-append increases the memory to 25,9MB (clearing with the loop: 18,8MB). The next re-append increases the memory to 29,3MB (clearing with the loop: 24,5MB).

I'm glad the memory usage is not climbing as fast but perhaps this can be optimized further? Unfortunately reloading the HTML page is not an option.

Answer 1

Memory management in JavaScript is aided by the garbage collector, a language feature that periodically deallocates memory no longer needed.

The delete operator essentially denotes an area of memory as being no longer needed. The memory will be deallocated when the garbage collector next runs.

Garbage collection is not predictable - delete $var or $var = null will allow the garbage collector to deallocate memory eventually. This may not be instant. This is why memory usage is not climbing as fast as you'd expect, and this is why delete $var is not reducing memory usage as fast as you'd expect.

IE does present a means for forcing the garbage collector to run:

if (typeof(CollectGarbage) == "function") {
    CollectGarbage();
}

Your script may slow down whilst this is happening, particularly if there is a large volume of memory to deallocate.

It's best to avoid forcing garbage collection - let the garbage collector run at the point it determines is most appropriate. CollectGarbage() is also undocumented - the behaviour may change or the function may be removed at any time.

In short:

• your use of delete database1[i] is the best you can do
• this will deallocate memory eventually
• memory usage will return to the expected level eventually
• you can force garbage collection in IE, but this process will eventually happen on its own