jQuery selectors speed test

JavaScript performance comparison

Revision 31 of this test case created by masood

Info

jQuery selectors speed test $ over .find

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<ul class="topnav" id="foo">
        <li>Item 1</li>
        <li>Item 2
                <ul><li>Nested item 1</li><li><a href="#" id="anchor">Nested item 2</a></li><li>Nested item 3</li></ul>
        </li>
        <li><a>Item 3</a></li>
</ul>
<ul class="topnav">
        <li><a>Item 1</a></li>
        <li>Item 2
                <ul><li>Nested item 1</li><li>Nested item 2</li><li><a>Nested item 3</a></li></ul>
        </li>
        <li>Item 3</li>
</ul>
<ul class="brand">
        <li><a class="linkic" href="brand/883-police/"  id="883 Police" title="Select 883 Police">883 Police</a> </li>
        <li><a class="linkic" href="brand/adidas/"  id="Adidas" title="Select Adidas">Adidas</a> </li>
        <li><a class="linkic" href="brand/adidas-originals/"  id="Adidas Originals" title="Select Adidas Originals">Adidas Originals</a> </li>
        <li><a class="linkic" href="brand/base/"  id="Base" title="Select Base">Base</a> </li>
        <li><a class="linkic" href="brand/boxfresh/"  id="Boxfresh" title="Select Boxfresh">Boxfresh</a> </li>
        <li><a class="linkic" href="brand/breo/"  id="Breo" title="Select Breo">Breo</a> </li>
        <li><a class="linkic" href="brand/brookhaven/"  id="Brookhaven" title="Select Brookhaven">Brookhaven</a> </li>
        <li><a class="linkic" href="brand/buddhist-punk/"  id="Buddhist Punk" title="Select Buddhist Punk">Buddhist Punk</a> </li>
        <li><a class="linkic" href="brand/canterbury/"  id="Canterbury" title="Select Canterbury">Canterbury</a> </li>
        <li><a class="linkic" href="brand/canterbury-lifestyle/"  id="Canterbury Lifestyle" title="Select Canterbury Lifestyle">Canterbury Lifestyle</a> </li>
        <li><a class="linkic" href="brand/christys/"  id="Christys" title="Select Christys">Christys</a> </li>
        <li><a class="linkic" href="brand/converse/"  id="Converse" title="Select Converse">Converse</a> </li>
        <li><a class="linkic" href="brand/deakins/"  id="Deakins" title="Select Deakins">Deakins</a> </li>
        <li><a class="linkic" href="brand/divine-trash/"  id="Divine Trash" title="Select Divine Trash">Divine Trash</a> </li>
        <li><a class="linkic" href="brand/dockers/"  id="Dockers" title="Select Dockers">Dockers</a> </li>
        <li><a class="linkic" href="brand/duck-and-cover/"  id="Duck and Cover" title="Select Duck and Cover">Duck and Cover</a> </li>
        <li><a class="linkic" href="brand/duffer-of-st-george/"  id="Duffer of St George" title="Select Duffer of St George">Duffer of St George</a> </li>
        <li><a class="linkic" href="brand/emporio-armani-ea7/"  id="Emporio Armani EA7" title="Select Emporio Armani EA7">Emporio Armani EA7</a> </li>
        <li><a class="linkic" href="brand/etienne-ozeki/"  id="Etienne Ozeki" title="Select Etienne Ozeki">Etienne Ozeki</a> </li>
        <li><a class="linkic" href="brand/fenchurch/"  id="Fenchurch" title="Select Fenchurch">Fenchurch</a> </li>
        <li><a class="linkic" href="brand/fila/"  id="Fila" title="Select Fila">Fila</a> </li>
        <li><a class="linkic" href="brand/firetrap/"  id="Firetrap" title="Select Firetrap">Firetrap</a> </li>
        <li><a class="linkic" href="brand/fly53/"  id="Fly53" title="Select Fly53">Fly53</a> </li>
        <li><a class="linkic" href="brand/fred-perry/"  id="Fred Perry" title="Select Fred Perry">Fred Perry</a> </li>
        <li><a class="linkic" href="brand/henleys/"  id="Henleys" title="Select Henleys">Henleys</a> </li>
        <li><a class="linkic" href="brand/henri-lloyd/"  id="Henri Lloyd" title="Select Henri Lloyd">Henri Lloyd</a> </li>
        <li><a class="linkic" href="brand/icon-eyewear/"  id="Icon Eyewear" title="Select Icon Eyewear">Icon Eyewear</a> </li>d
</ul>

<div class="foo">
        <a>bar</a>
        <a>bar</a>
        <a>bar</a>
        <a>bar</a>
        <a>bar</a>
        <div><a>bar</a></div>
</div>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
$
jQuery("#Boxfresh");
pending…
Find
document.getElementById("Boxfresh");
pending…
ID first then other
jQuery(".brand").find("a#Boxfresh");
pending…
ID first then find
jQuery(".brand").find("li").find('a#Boxfresh');
pending…
Get Link with ID selector
jQuery("a#Boxfresh");
pending…
Get Link with ID selector and find
jQuery("li").find("#Boxfresh");
pending…
id then class linkic
jQuery("ul.brand").children("li").children("a#Boxfresh");
pending…
Just class
jQuery("li").children("a#Boxfresh");
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment