Is there a tool/plugin/function for Firefox that'll dump out a memory usage of Javascript objects that you create in a page/script? I know about Firebug's profiler but I'd like something more than just times. Something akin to what Yourkit has for Java profiling of memory usage.
Reason is that a co-worker is using id's for "keys" in an array and is creating 1000's of empty slots when he does this. He's of the opinion that this is harmless whereas my opinion differs. I'd like to offer some proof to prove whether I'm right or not.
I haven't tried the Sofware verify tools, but Mozilla has tools that track overall memory consumed by firefox for the purpose of stemming leaks:
http://www.mozilla.org/performance/tools.html
and:
https://wiki.mozilla.org/Performance:Leak_Tools
There's also this guy saying to avoid large arrays in the context of closures, towards article bottom
http://ajax.sys-con.com/node/352585
I think JavaScript Memory Validator from Software Verification Limited can help you, it has allocations view, objects view, generations view, etc. It's not free but you can use the evaluation version to check your coworker's code. They also have a Performance and Coverage Validators...
See the source. Sparse arrays don't take up lots of memory, but if your colleague doesn't need any Array functionality, he should be using plain Objects anyway.
Try also about:memory which shows how much memory each window occupies and how much of it is dedicated to JS objects. It gives high level summary without per object usage, but it is a good starting point for investigating memory requirements of a site.
You can use Mozilla’s Developer Tools. In order to use advanced developer tools of Firefox you need to create a debug build instead of a release build. For more on building process, see the page. Also, more information about using Mozilla’s Developer Tools you can find in this paper.
Related
The Javascript profiler in Chrome 79 for Windows seems to no longer mention whether a function has been optimized or not. This used to be available in chart view when rolling over a function. Is this information available any longer? Is it even relevant with Turbofan, nowadays?
We don't surface this information in DevTools anymore. The supported way of profiling JS is through the Performance panel now, but as you say I think it's less relevant to expose optimizations/deoptimization decisions with TurboFan, as there are no hard rules on constructs or patterns that can't be optimized. We don't want to push developers to micro-optimize their code to the compiler.
Another consideration is displaying this info usefully - I suspect the old version that did show optimization info only told you if the function was ever optimized, not that it had been optimized for that specific invocation. To make this info useful you would want to see when the function was optimized, relative to the various invocations. But I think this info is more actionable for V8 developers and not so much for web developers, so we don't expose it.
I'd like to know how much memories are used during a single function call, what should I do?
I'm not developing in node.js environment, so it would be better to know if there's anyway to do it in plain vanilla js.
Chrome dev tools have excellent tools to monitor both performance and memory used. Hit 'F12' and check the 'Performance' and 'Memory' tabs.
The "Record allocation profile" option should show memory allocations from your javascript functions.
You can also follow this article on a how to step by step tutorial.
This falls in the category of "manually" though, not programmatically but it could still be helpful.
Paul Irish has also released memory-stats.js, which I guess can be used to measure memory allocated by the Javascript engine but in no way you can corelate it to a function in specific.
Right now in some javascript code I am writing, the profiler shows that garbage collection is taking up a lot of time. I was wondering if there was a way to see exactly why so much time was spent with garbage collection. Any suggestions for some good chrome or firefox plugins or debugging tools to help me do this?
Google Chrome Developer tools have built in support for memory profiling. This allows you to profile memory allocations and garbage collection:
https://developers.google.com/chrome-developer-tools/docs/javascript-memory-profiling
As you can see, they show you the count for each object.
I have a heap profile taken in Chrome Dev Tools, but I am not sure how to interpret the data. As a test, I created 10,000 WidgetBuilder objects, each with their own methods. I would like to profile out storing methods on instances versus the prototype and see how that affects memory and performance when my page loads.
Should I focus on Retained Size or Shallow Size?
Are the values listed in these columns in bytes?
What is considered a lot of memory?
You might want to start here:
https://developers.google.com/chrome-developer-tools/docs/heap-profiling
It goes into detail on how to understand what you're reading. As for what is considered a lot of memory that's a tricky question. If your website is targeted at mobile devices I would start there as a constraint. To come up with a good comparison I'd suggest running the profiler against sites that you use every day and observe the memory consumption there.
If you find you're using more memory than gmail you might want to rethink ;)
I also recommend checking out jspref:
http://jsperf.com/prototype-vs-instance-functions
There is a LOT of prior work done on that site in regards to performance testing. You might be able to save yourself some time.
I am currently reading High Performance JavaScript by Nicholas C. Zakas and in the book he says things like:
Comparing the two pieces of code shows that using the Selectors API is
2 to 6 times faster across browsers (Figure 3-6).
What I'm looking for is a browser based tool that lets me capture and measure the performance of a given piece of JavaScript and compare it against another script that uses a different approach (e.g., using the Selector API vs getElementsByTagName).
I've used Chrome and Firebug, but neither of them really seem to give me the kind of comparisons he's doing here. Am I using these tools incorrectly or is there a new tool I'm not familiar with that I should be using?
The most popular approach is just use the free online services of http://jsperf.com/.
Or clone it from github.
It has one big advantage over manual testing: It uses a Java Applet which gives access to a nanosecond timer, while JS timers (Date objects) can only resolve to milliseconds.
Chrome developers tools are the way to go. There are three awesome features.
Timeline. This will show you the rendering time of any executing javascript on a timeline graph.
Heap snapshot. This guy will take a snapshot of your current JS, including all of your chain. It also shows you how much memory each element is taking - provides a good way to find places your code is chewing.
CPU Profile. Shows how much CPU usage a function is eating up, also useful for finding places to optimize and perhaps introduce web workers.
If you use the Chrome beta channel check out the Speed Tracer extension (by Google). It's basically an enhanced timeline. If you're a jQuery guy the beta also has CSS Selector Profiling. I have yet to use so I can't speak to its uses.