JavaScript Performance Evaluation

Question

background:

I've searched around for a reference, or possibly a tool, that helps you theoretically evaluate the efficiency (resource cost) of your JavaScript. This search has turned up a lot of excellent debugging software, but I can't really find something that helps me optimize the code, by utilizing less resource-intensive methods.

question:

Is there any resource (online guide, list, database, book, anything) or perhaps some software (web-based, browser plugin, IDE extension) that will help you optimize your JavaScript?

example:

innerText in IE / textContent in Firefox requires far fewer resources than innerHTML in either browser.

That one is kinda common sense, because it's less powerful, but there are other comparisons I hear about on a daily basis, and can't really verify if they are in fact better for optimized code or more efficient, and even if I could I have no way to test it!

Any ideas?

Answer 1

the usual way to evaluate Javascript is by evaluating the amount of time it takes for a set of code to execute:

var begin = new Date().getTime();
//do stuff
console.debug( new Date().getTime() - begin );

However, there are some issues with this in IE. if a script takes <15ms to run, IE returns 0ms as the result.

Various javascript libraries have testing frameworks to help evaluate your code's speed. Dojo's testing framework is called DOH.

John Resig also made a firebug plugin called FireUnit which allows you to easily evaluate the time it takes for a function to execute, and with a little configuring, also outputs the Big O of a function, which is a great piece of data.

Check out Resig's video from JSConf on JS performance testing:

Measuring Javascript Performance - John Resig

FireUnit rundown

Answer 2

I always liked the simple approach with Firebug:

console.time("timer-name");

and

console.timeEnd("timer-name");

Good for granular level measurements.

Answer 3

Firebug's 'profile' tool is great for measuring javascript performance. It shows you all the bottlenecks in your code in a function by function breakdown, showing which one's had the highest average time, most calls, etc.

Answer 4

You can easily compare JavaScript code snippet performance using http://jslibs.googlecode.com/svn/trunk/jseval.html (use ctrl+p to profile the code)

Answer 5

Tools are just beginning to show up. There are some great video speeches online, though.

Here's one featuring Nicholas Zakas.

Answer 6

Profiler in IE8 is amazing. It gives you a tree view along with the Inclusive time (in ms)

Answer 7

For JavaScript, XmlHttpRequest, DOM Access, Rendering Times and Network traffic for IE6, 7 & 8 you can use the free dynaTrace AJAX Edition