Javascript Memory Usage & Debugging in Chrome / Firefox (Minefield)

Question

I am currently developing an application using Google O3D WebGL framework, and this is the first time I am using JavaScript so intensively. The features are only around 20% complete, but already the application on its own starts off by taking up around 160 meg of memory, whilst leaving the application running it consumes around 200kb per second in Chrome, 2meg in FF; as the screen is refreshed. As I am writing this I have left Chrome 9 running and it has just hit 400 meg of memory usage. I am now crapping myself especially with FF's usage, and I am looking for any really good documentation on optimizing JavaScript, preventing memory leaks, anything that will help me tackle this basically. I would also really appreciate any links to awesome tools that will help me. Thanks in advance.

Edit: I have come across Mozilla performance tools but I need something simple to use, preferably with a GUI, or at least a noob friendly guide. Also a lot of those tools are for linux (I am using Win7) or require purchase / are command line only. + I would really like to see something for Chrome :) but I will accept the answer that provides the most usefull information.

Edit: Google Chrome's developer tools only report on 10meg of memory usage, unsure where the rest is coming from.

Solution 1

Have you had a chance to check out Speed Tracer yet? That should give you more of what you need I think.

With memory usage, you probably want to do a heap profile in the Chrome developer tools under the "Profiles" tab. You can compare multiple heap profiles to get a look at memory usage.

Solution 2

According to http://blog.chromium.org/2011/05/chrome-developer-tools-put-javascript.html you can actually use the performance.memory window property within your Javascript to check the effect of sections of code on memory usage.

This looks useful to me as interpreting the output of heap snapshots isn't straightforward.

Comments

[Chris]

@musicfreak: Very true, I do expect it to take up quite a bit of memory, and will require users to have a decent spec PC, but the increase in fire fox's memory usage wont take long to max out a users system if they leave it open, I think its best I get this dealt with now before I go any further! as I want to be able to tackle this sort of thing in the future :)

[Sasha Chedygov]

Yeah, true, and I definitely think that is due to memory leaks (either in the WebGL implementation or your application, most likely the latter) but I just wanted to mention that the original memory usage is probably not your fault. :)

[Chris]

Thanks I have had a look at speed tracer, it shows a timer performing the refresh regularly but its only becomes slow when the memory usage bulks up. I have managed to get the memory heap and it shows 10 meg of items, but this doesn't explain the rest. I have a feeling my code is really bad, I am not using the delete function which I read about somewhere. This is probably what I need to look into, c# for example in most cases advises you use dispose on any classes that inherit the IDisposable interface once you have finished with them. I have custom function class for all my 3d objects params

[Chris]

There should be a tool that goes and adds delete to all unused properties in your code - that is a tool I would pay for.

[Bob Aman]

There's also the about:memory page in recent versions of Chrome.