jQuery selector performance (v4)

Revision 4 of this benchmark created by Boye 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
Query'ing directly by className
$('.anchor');
ready
Query'ing directly by className (with tag prefix)
$('a.anchor');
ready

Revisions

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