In this article jQuery is tested with different selectors in order to find specific elements in the DOM tree. The delay of each selector is precisely calculated and the idea is to find out which one is the fastest for the given goal.
jQuery is one of the best javascript libraries I have ever worked with. It is quite simple and usually reduces the amount of javascript code in web applications. Besides all the advantages it brings to the web community, we have to pay attention to a few details when reusing this library in order to get the best part of it.
I will describe a few tips on how to improve the performance of your javascript code. Most of these tips aren’t a big deal if your pages are small and simple. But if you create complex html pages, you should follow them in order to prevent the browser from locking when the page loads up. Even if you are not concerned with performance at all, learning these things will bring benefits to your overall knowledge about this library.
jQuery has a bunch of different selectors – as you can see from the documentation here – and I won’t consider all of them in this analysis. My idea is to explore different ways of finding a specific element in the html page by using different types of search. Benjamin Sterling has already researched this topic here, but I want to add a different point of view, which is more accurate and provides more alternatives for the developers.
Let me start talking about the test html page, which has over 20,000 elements separated in chuncks of 5,000. Basically, there are 5,000 divs + 5,000 spans+ 5,000 paragraphs and 5,000 small tags with the following characteristics:
<!-- 5000 'div' elements -->
…
<!– 5000 ‘span’ elements –> <span id=”b-0″ class=”span-0″ row=”b-0″>Span 0</span> <span id=”b-1″ class=”span-1″ row=”b-1″>Span 1</span> … <span id=”b-4999″ class=”span-4999″ row=”b-4999″>Span 4999</span> <!– 5000 ‘p’ elements –> <p id=”c-0″ class=”p-0″ row=”c-0″>Paragraph 0</p> <p id=”c-1″ class=”p-1″ row=”c-1″>Paragraph 1</p> … <p id=”c-4999″ class=”p-4999″ row=”c-4999″>Paragraph 4999</p> <!– 5000 ‘small’ elements –> <small id=”d-0″ class=”small-0″ row=”d-0″>Small 0</small> <small id=”d-1″ class=”small-1″ row=”d-1″>Small 1</small> … <small id=”d-4999″ class=”small-4999″ row=”d-4999″>Small 4999</small>
The 20,000 elements above are generated by javascript. They provide a good laboratory to check the speed of each selector, since we can expect more accurate results in this analysis. The page itself has a few more tags to display information and execute each test, but this shouldn’t affect the final results.
The test page is available here. It takes a few seconds to load because the javascript must create the DOM tree as described above. So please be patient. Note also that each test uses the measure() function, which calculates the delay of the call in milliseconds.
Test 1 – Finding an element by ID
The first test is to find an element by its ID. I decided to get the element whose ID is “d-2642”. We can do this in three different ways:
A – Using the ID selector
$(‘#d-2642’).html()
B – Using attribute search
$(‘[id=”d-2642″]’).html()
C – Using attribute search + tag
$(‘small[id=”d-2642″]’).html()
Running this test for the first time in different browsers, I could reach the results displayed in the following table (in milliseconds). It is clear that the # operator is the most efficient one.
| Firefox | Opera | IE6 | IE7 | Safari | |
|---|---|---|---|---|---|
| A | 156 | 0 | 31 | 40 | 0 |
| B | 3609 | 828 | 2344 | 841 | 844 |
| C | 578 | 93 | 406 | 210 | 172 |
Test 2 – Finding an element by Class
Although CSS classes are intended to be reused among elements, you might create some elements with a unique class name just to identify and retrieve them through javascript. This is exactly what we test in this second test by seaching the element whose class is “p-4781”. We have four alternatives:
A – Using the class selector
$(‘.p-4781’).html()
B – Using the class selector + tag
$(‘p.p-4781’).html()
C – Using attribute search + tag
$(‘p[class=”p-4781″]’).html()
D – Using tag search + filter
$(‘p’).filter(‘.p-4781’).html()
After running this test for the first time in different browsers, I got:
| Firefox | Opera | IE6 | IE7 | Safari | |
|---|---|---|---|---|---|
| A | 2891 | 641 | 1718 | 631 | 329 |
| B | 453 | 78 | 313 | 180 | 78 |
| C | 422 | 109 | 578 | 201 | 187 |
| D | 203 | 266 | 375 | 210 | 94 |
The table above shows case B as the fastest selector for most browsers (except Firefox). It is easy to understand why case A isn’t efficient, since the code has to iterate over all elements of the DOM tree. Case C and D aren’t that bad, but I would say case B should be the preferred one for this goal.
Test 3 – Finding an element by Attribute
The third test is to find elements by a given attribute value. Sometimes this technique is useful and I decided to test it by searching for the element that has “c-3221” as the value of the row attribute. There are four possibilities in this case:
A – Using attribute search
$(‘[row=”c-3221″]’).html()
B – Using attribute search + tag
$(‘p[row=”c-3221″]’).html()
C – Using tag search + filter
$(‘p’).filter(‘[row=”c-3221″]’).html()
D – Using (tag + attribute) search + filter
$(‘p[@row]’).filter(‘[row=”c-3221″]’).html()
Running this test for the first time in different browsers, I could get the following results:
| Firefox | Opera | IE6 | IE7 | Safari | |
|---|---|---|---|---|---|
| A | 6610 | 1390 | 2500 | 801 | 1156 |
| B | 1250 | 360 | 406 | 200 | 250 |
| C | 1265 | 968 | 485 | 231 | 281 |
| D | 4078 | 1000 | 656 | 320 | 625 |
Case B is for sure the best approach to find an element by a specific attribute value.
Conclusions
This experiment was an attempt to find the right and fastest way of finding specific elements in the DOM tree using jQuery. Every jQuery developer should know and understand these details in order to create efficient code. Benjamin Sterling gave the first step in such performance analysis, but I could provide another point of view, which uses a big DOM tree and more alternatives to be checked.
Hugo V. Teixeira 