E-com DevBlog

Those who have been using jQuery since the initial release know that it is a serious boon to any developer working with JavaScript and multiple browsers.  What you may not know is that while jQuery is incredibly awesome, browsers have gone well past the sluggish speed of the IE6 and 7 days. This may not mean much to you as your code still works like a champ and behaves well in cross browser situations, but by using jsPerf you can see just how much your “lazy” selectors are costing you.

Standard Disclaimer: The following are massive tests and while they demonstrate the repetitive nature of selectors they may not actually help your web application (especially if it is a small application with only one or two selector calls). As always, do your own benchmarking with the same hardware your customer or client is using. Always remember to remove the jank.

jsPerf.com (not the official logo, but you get the idea)

jsPerf is a JavaScript Performance benchmarking site. You can go there to write your own series of benchmarks and watch them perform in different browsers.  The site also leverages the use of Browserscope showing you how other browsers have performed using your test.  It is important to remember that you cannot snap judge your tests, you really should be running them with as many browsers as possible. This is important because it will affect how your JavaScript runs on every browser. Not all browsers use the V8 engine that Chrome does .

For an example, lets fire up http://jsperf.com/getelementbyid-vs-jquery-id/13. When you load this page you can see that the test is set up to use jQuery 1.7 and is going to run several tests (using a jQuery selector, using the vanilla getElementById, creating a custom function for selection, etc). Click the “Run Tests” button to begin the test sequence.  When finished you will be shown the fastest test and the slowest.  Each test will also show the relation in speed to the fastest running test.

As an example I ran this test using Chrome 22.0.1215.3 on Windows 7, below is a screen shot of my results:

From the image above you can see that using the plain JavaScript “document.getElementById(‘foo’);” was the fastest method for selecting the element with an id of foo. By faster I don’t mean just a ‘meh’ amount of fast, I mean it was blazingly fast, look at the speed difference for the jQuery selector “$(‘#foo’);”. Now back to the disclaimer, take a look at the following chart:

This chart shows plenty of Chrome love, but also highlights the speed differences and improvements in the internal JavaScript engine. Not all browsers are created equal, but luckily seem to be improving all the time.

You can see that other browsers (including previous versions of Chrome) do not run this test with the same performance. In fact, some browsers are even up to 50% slower running the same tests. Always test your code, and then test it again.  After that, have someone else test your code and compare the results.

Now, go out there and start tearing up your old code and getting performance back to where it should be .