Fine Tuning Your JavaScript with jsFiddle and jsPerf

You're bored, want to learn, interested in a new method or API, and/or just need to settle an argument...use jsFiddle along with jsPerf!

If you've been using these tools for seemingly forever...congrats (you may stop reading). Otherwise, start fiddling; and if you're fiddling around with 2 or more functions that do the same thing use jsPerf to test and compare the performance of each one.

My use case started with the need to compare a few different implementations for traversing up a DOM tree using jQuery. First I set up the HTML body in jsFiddle to resemble the DOM used on our site, then I added the 3 different snippets with alerts to verify they all end up with the same result.

Here's the fiddle

The next thing I did was set up the 3 snippets without the alerts in jsPerf to compare the performance.

Here's the jsPerf page

I'd go into more detail here, but it should be pretty self-explanatory once you go to the pages above.