Sizzle is Slow (v2)

Revision 2 of this benchmark created by cHao on

Description

Here's why:

  • jQuery will recurse the entire DOM for a query containing more than one "selector". Note how selecting by both id and class yields about the same speed.

Recursing the entire DOM for a very accessible element is stupid and holds a clear speed disadvantage.

Preparation HTML

<p class="noise"><span>noise</span>
<p class="noise"><span>noise</span>
<p class="noise"><span>noise</span>
<div class="noise">
    <p class="noise"><span>noise</span></p>
    <table class="findme" id="foo">
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </tbody>
    </table>
    <p class="noise"><span>noise</span></p>
</div>
<p class="noise"><span>noise</span></p>
<p class="noise"><span>noise</span></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Test runner

Ready to run.

Testing in
TestOps/sec
POJS
var foo = document.getElementById("foo"),
rows = foo.tBodies[0].rows;
ready
jQuery (via id)
var rows = $("#foo tbody tr");
ready
jQuery (via class)
var rows = $(".findme tbody tr");
ready
jQuery "Optimized"
var foo = $("#foo"), rows = foo.find("tbody tr");
ready
Hybrid
var foo = $("#foo"), rows = foo[0].tBodies[0].rows;
ready
QS + QSA
var rows = document.querySelector('#foo').querySelectorAll('tr')
ready
QSA (by ID)
var rows = document.querySelectorAll('#foo tr');
ready
QSA (by class)
var rows = document.querySelectorAll('.findme tr');
ready
getElementById + QSA
var rows = document.getElementById('foo').querySelectorAll('tr');
ready

Revisions

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