Browser Memory Management

As a follow-up of last week's discussion of browser memory leaks, I've been writing quite a few tests using HTML and JavaScript and monitoring the CPU and memory use in the Task Manager to see if I can get a better understanding of browser memory management, and avoid memory leaks.

Browser memory management isn't really an issue unless you're developing rich user interfaces. Page refreshes release memory, for example. But if you're creating applications with rich user interfaces, and storing data in arrays that retain their state, it can become an issue.

I thought the following test was kind of interesting:

http://www.radile.com/rdweb/temp/leaks.html


The "Load Array" button runs a script that uses the Array.push() method to append a string to a set of arrays. An input element is used to specify the number of element to append to the arrays. The "Unload Array" button runs the Array.pop() method to remove array elements.

A window alert is used to indicate the number of elements in the arrays at the completion of the call.

It's interesting to note the differences between Firefox and IE. Bottom line is that Firefox consumes less half the memory and performs better, particularly when working with large arrays. The unload procedure also physically releases memory in Firefox, but not in IE. You can see it in Task Manager.

What do I mean by performance? You'll definitely notice a difference with 10,000 array elements. On my box, IE requires about 20 seconds to complete the Unload function. With 100,000 array elements, Firefox completes the unload in a couple seconds. With Internet Explorer, let's just say that you'll probably just use Task Manager to end the application before it completes.

Nathan.