DotNetCurry Logo

Perf Test your jQuery Selectors using jsPerf

Posted by: Suprotim Agarwal , on 3/6/2014, in Category jQuery and ASP.NET
Views: 14068
Abstract: Performance Test your jQuery Selectors using the jsPerf online tool.

In recent years, Developers have started focusing on client-side performance, which essentially means testing your JavaScript code. One way to improve client-side code is to test blocks of code and optimize it. jsPerf.com provides a simple way to test the performance of JavaScript code. All you need to do is provide two or more code snippets that you want to compare for performance and it will test them to see which performs better and across different browsers.

 

Now we have all used CSS selectors to access DOM elements. For example using .classname allows you to access all elements that have the class .classname applied to them. jQuery uses Sizzle (which is a pure-JavaScript CSS Selector engine) to select elements from the DOM. Since there are multiple ways to use selectors, there are some techniques laid down to speed up the performance of your selectors.

We will demonstrate one such technique that says you should never prepend a tag name before an ID as it slows down the selector. So essentially that means if you have a DIV element with an id description, do not use div#description to select the element. Instead use only #description which is better performing than the latter. But how do we test this theory? Let’s use jsPerf.

Go to jsperf and set up some basic info for your test case. I have set it up over here http://jsperf.com/prepend-tag-before-id. Start by mentioning a Title and Description of our test case

jsperf-s1

Scroll down to write some preparation code which is essentially some HTML code on which our selectors will work

jsperf-s2

The next step is to write some code snippets to compare. We are essentially comparing two pieces of code:

$('div#description').css('border', '1px solid #000000');

Vs

$('#description').css('border', '1px solid #000000');

Where in the first snippet we are prepending the Div tag before ID (div#elementid) VS selecting the element directly by its ID (#elementid)

jsperf-s3

Scroll down to the bottom and click on ‘Save Test Case’. In our case, the jsperf test got saved as http://jsperf.com/prepend-tag-before-id

Run the tests and see which code performs better. Here’s a test run on Chrome v32.0

jsperf-results-chrome

..and here’s a test run on IE 11.0

jsperf-results-ie

jsperf keeps a track of each browser result, so you can compare benchmark tests across environments. Here’s a snapshot of the same test run in different browsers and the performance comparison across browsers.

browser-scope

As you can see, after running some tests on jsperf.com, we can see that the snippet which does not prepend tag before ID (shown in red) performs better than the snippet which prepends tag before ID (show in blue). The higher the number, the better it is as it conveys a higher number of operations per second. Hence using this simple jsperf test, we can reach the conclusion that if you prepend the tag name before an ID, it slows down the selector.

As Developers, should our focus be Code Readability or Performance?

This question lingers the mind of most developers out there. One point to always remember and as quoted by Donald Knuth is Premature optimization is the root of all evil (or at least most of it) in programming. Your focus should be on writing the correct algorithm. Write it in a way that’s correct and readable. Don’t spend too much time on optimization unless you exactly know what to optimize.

I introduced you to jsPerf.com so that you are aware of a tool that can help you test your code snippets when you have empirical evidence that your code is not performing well. Use it meticulously!

This article was taken from my upcoming The Absolutely Awesome jQuery Cookbook at www.jquerycookbook.com

Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+
Further Reading - Articles You May Like!
Author
Suprotim Agarwal, MCSD, MCAD, MCDBA, MCSE, is the founder of DotNetCurry, DNC Magazine for Developers, SQLServerCurry and DevCurry. He has also authored a couple of books 51 Recipes using jQuery with ASP.NET Controls and a new one recently at The Absolutely Awesome jQuery CookBook.

Suprotim has received the prestigious Microsoft MVP award for nine times in a row now. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that represents premium web sites and digital publications comprising of Professional web, windows, mobile and cloud developers, technical managers, and architects.

Get in touch with him on Twitter @suprotimagarwal, LinkedIn or befriend him on Facebook



Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!