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.

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.

• javascript
• debugging
• google-chrome
• memory-leaks
• memory-management

• That much memory use (160MB) isn't uncommon in 3D applications. Think of how much memory real 3D games take up--and on top of that, your app is written in JavaScript! But the constant increase in memory you are experiencing is probably due to some kind of memory leak, though I can't help you any more than that. – Sasha Chedygov Commented Jan 12, 2011 at 20:34
• 1 @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 :) – Chris Commented Jan 12, 2011 at 20:38
• 1 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. :) – Sasha Chedygov Commented Jan 12, 2011 at 20:40
• I used Chrome snapshots of memory (on linux) to track memory usage by type of objects, I found it useful. I've now recoded some of my long running widgets which was adding and removing from DOM a lot of elements to work instead with 2 elements, one out of DOM (to work on him) and one in the DOM (visible), and I toggle between the two instead of creating new elements always (in my case it was canvas objects). Garbage collectors have difficulties to identify what you think is not used anymore. – regilero Commented Jan 12, 2011 at 23:27

2 Answers 2

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.

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.