5

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?

NateDSaint
  • 1,524
  • 2
  • 16
  • 35
  • Thanks for all the answers! I'll end up using these to test everything, but I'm guessing rather than using a guide to show what you "should" and "shouldn't" use, you just use trial and error in tandem with these tests to establish best practices for your own use cases. Will do. – NateDSaint Jul 20 '09 at 19:59
  • Not sure why this was closed. – NateDSaint Apr 15 '13 at 19:06

5 Answers5

8

In the same line as strife25, firebug has a very handy method of measuring time without handling any dates. Just use this:

console.time("Your timer name");
//Execute some javascript
console.timeEnd("Your timer name");

Then, check the console. alt text http://aquate.us/u/62232567893647972047.jpg

Edit -- off by 30 odd seconds. :(

Salty
  • 6,688
  • 3
  • 33
  • 31
6

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

linusthe3rd
  • 3,455
  • 3
  • 28
  • 43
  • 2
    jsyk, on laptops, IE9's timer resolution depends on the computer's current power plan. If it's running on battery then the resolution is ~16ms, but if it's on charge then it's much finer. Also, you *should* run a test over a very large number of iterations so the test itself would probably take several seconds, then divide by the number of iterations. This makes the timer resolution makes little difference. – Niet the Dark Absol Apr 04 '12 at 17:39
3

I always liked the simple approach with Firebug:

console.time("timer-name");

and

console.timeEnd("timer-name");

Good for granular level measurements.

Mike Robinson
  • 24,971
  • 8
  • 61
  • 83
1

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.

TJ L
  • 23,914
  • 7
  • 59
  • 77
1

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

Nick
  • 7,475
  • 18
  • 77
  • 128