jQuery selector performance (v8)

Revision 8 of this benchmark created by Kyle A. Matheny on

Description

A test case to determine which jQuery approach is the best (performance-wise) when query'ing DOM elements.

Preparation HTML

<table id="stats" cellpadding="0" cellspacing="0">
        <thead>
                <tr>
                        <td>A</td>
                        <td>B</td>
                        <td>C</td>
                        <td>D</td>
                </tr>
        </thead>
        <tfoot></tfoot>
        <tbody>
                <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td><a class="anchor" href="#" rel="external">Link</a></td>
                </tr>
                <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td><a class="anchor" href="#" rel="external">Link</a></td>
                </tr>
                <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td><a class="anchor" href="#" rel="external">Link</a></td>
                </tr>
                <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td><a class="anchor" href="#" rel="external">Link</a></td>
                </tr>
                <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td><a class="anchor" href="#" rel="external">Link</a></td>
                </tr>
                <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td><a class="anchor" href="#" rel="external">Link</a></td>
                </tr>
                <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td><a class="anchor" href="#" rel="external">Link</a></td>
                </tr>
                <tr class="target">
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td><a class="anchor" href="#" rel="external">Link</a></td>
                </tr>
                <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td><a class="anchor" href="#" rel="external">Link</a></td>
                </tr>
                <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td><a class="anchor" href="#" rel="external">Link</a></td>
                </tr>
        </tbody>
</table>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Test runner

Ready to run.

Testing in
TestOps/sec
Default CSS-like approach
$('#stats .anchor');
ready
With context and prefixed with tags
$('a.anchor', 'table#stats');
ready
Using the find() method
$('#stats').find('.anchor');
ready
Using a more exotic selector
$('#stats').find('a[rel*=external]');
ready
Descendant selector (instead of class)
$('table#stats').find('a');
ready
Using find() and a more specific selector
$('table#stats').find('a.anchor');
ready
Using the filter() method
/*The following does not return a.anchor elements. Common mistake to lookout for. .filter() does not search for descendents. */
$('table#stats').filter('a.anchor');
ready
Proper use of filter() method
/*Grab the ID, find all of it's a's, filter down to only those with the class*/
$('#stats').find('a').filter('.anchor');
ready
Proper use of filter() method 2
/*Grab the ID, find all items with the class, filter down to only the a's*/
$('#stats').find('.anchor').filter('a');
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.