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.
Memory leaks can and do happen in garbage collected languages such as JavaScript. These can go unnoticed for some time, and eventually they will wreak havoc. For this reason, memory profiling tools are essential for finding memory leaks.
Hence there is no explicit way to allocate or free up memory in JavaScript. Just initializing objects allocates memory for them. When the variable goes out of scope, it is automatically garbage collected(frees up memory taken by that object.)
JavaScript takes care of this for us: It allocates the memory that we will need for the object we created. Using memory is something we do explicitly in our code: Reading and writing to memory is nothing else than reading or writing from or to a variable. This step is handled as well by the JavaScript engine.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With