jQuery selectors speed test

JavaScript performance comparison

Revision 25 of this test case created


jQuery selectors speed test $ over .find

Preparation code

<script src="https://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><a>Item 3</a></li>
<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>Item 3</li>
<ul id="Brand">
        <li><a href="brand/883-police/"  id="883 Police" title="Select 883 Police">883 Police</a> </li>
        <li><a href="brand/adidas/"  id="Adidas" title="Select Adidas">Adidas</a> </li>
        <li><a href="brand/adidas-originals/"  id="Adidas Originals" title="Select Adidas Originals">Adidas Originals</a> </li>
        <li><a href="brand/base/"  id="Base" title="Select Base">Base</a> </li>
        <li><a href="brand/boxfresh/"  id="Boxfresh" title="Select Boxfresh">Boxfresh</a> </li>
        <li><a href="brand/breo/"  id="Breo" title="Select Breo">Breo</a> </li>
        <li><a href="brand/brookhaven/"  id="Brookhaven" title="Select Brookhaven">Brookhaven</a> </li>
        <li><a href="brand/buddhist-punk/"  id="Buddhist Punk" title="Select Buddhist Punk">Buddhist Punk</a> </li>
        <li><a href="brand/canterbury/"  id="Canterbury" title="Select Canterbury">Canterbury</a> </li>
        <li><a href="brand/canterbury-lifestyle/"  id="Canterbury Lifestyle" title="Select Canterbury Lifestyle">Canterbury Lifestyle</a> </li>
        <li><a href="brand/christys/"  id="Christys" title="Select Christys">Christys</a> </li>
        <li><a href="brand/converse/"  id="Converse" title="Select Converse">Converse</a> </li>
        <li><a href="brand/deakins/"  id="Deakins" title="Select Deakins">Deakins</a> </li>
        <li><a href="brand/divine-trash/"  id="Divine Trash" title="Select Divine Trash">Divine Trash</a> </li>
        <li><a href="brand/dockers/"  id="Dockers" title="Select Dockers">Dockers</a> </li>
        <li><a href="brand/duck-and-cover/"  id="Duck and Cover" title="Select Duck and Cover">Duck and Cover</a> </li>
        <li><a 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 href="brand/emporio-armani-ea7/"  id="Emporio Armani EA7" title="Select Emporio Armani EA7">Emporio Armani EA7</a> </li>
        <li><a href="brand/etienne-ozeki/"  id="Etienne Ozeki" title="Select Etienne Ozeki">Etienne Ozeki</a> </li>
        <li><a href="brand/fenchurch/"  id="Fenchurch" title="Select Fenchurch">Fenchurch</a> </li>
        <li><a href="brand/fila/"  id="Fila" title="Select Fila">Fila</a> </li>
        <li><a href="brand/firetrap/"  id="Firetrap" title="Select Firetrap">Firetrap</a> </li>
        <li><a href="brand/fly53/"  id="Fly53" title="Select Fly53">Fly53</a> </li>
        <li><a href="brand/fred-perry/"  id="Fred Perry" title="Select Fred Perry">Fred Perry</a> </li>
        <li><a href="brand/henleys/"  id="Henleys" title="Select Henleys">Henleys</a> </li>
        <li><a href="brand/henri-lloyd/"  id="Henri Lloyd" title="Select Henri Lloyd">Henri Lloyd</a> </li>
        <li><a href="brand/icon-eyewear/"  id="Icon Eyewear" title="Select Icon Eyewear">Icon Eyewear</a> </li>
        <li><a href="brand/k-swiss/"  id="K-Swiss" title="Select K-Swiss">K-Swiss</a> </li>
        <li><a href="brand/kickers/"  id="Kickers" title="Select Kickers">Kickers</a> </li>
        <li><a href="brand/lacoste/"  id="Lacoste" title="Select Lacoste">Lacoste</a> </li>
        <li><a href="brand/lee/"  id="Lee" title="Select Lee">Lee</a> </li>
        <li><a href="brand/new-era/"  id="New Era" title="Select New Era">New Era</a> </li>
        <li><a href="brand/nicholas-deakins/"  id="Nicholas Deakins" title="Select Nicholas Deakins">Nicholas Deakins</a> </li>
        <li><a href="brand/nike/"  id="Nike" title="Select Nike">Nike</a> </li>
        <li><a href="brand/one-true-saxon/"  id="One True Saxon" title="Select One True Saxon">One True Saxon</a> </li>
        <li><a href="brand/original-penguin/"  id="Original Penguin" title="Select Original Penguin">Original Penguin</a> </li>
        <li><a href="brand/paul-and-shark/"  id="Paul and Shark" title="Select Paul and Shark">Paul and Shark</a> </li>
        <li><a href="brand/peter-werth/"  id="Peter Werth" title="Select Peter Werth">Peter Werth</a> </li>
        <li><a href="brand/pretty-green/"  id="Pretty Green" title="Select Pretty Green">Pretty Green</a> </li>
        <li><a href="brand/puma/"  id="Puma" title="Select Puma">Puma</a> </li>
        <li><a href="brand/reebok/"  id="Reebok" title="Select Reebok">Reebok</a> </li>
        <li><a href="brand/robe-di-kappa/"  id="Robe Di Kappa" title="Select Robe Di Kappa">Robe Di Kappa</a> </li>
        <li><a href="brand/rockport/"  id="Rockport" title="Select Rockport">Rockport</a> </li>
        <li><a href="brand/timberland/"  id="Timberland" title="Select Timberland">Timberland</a> </li>
        <li><a href="brand/two-in-the-shirt/"  id="Two In The Shirt" title="Select Two In The Shirt">Two In The Shirt</a> </li>
        <li><a href="brand/voi-jeans/"  id="Voi Jeans" title="Select Voi Jeans">Voi Jeans</a> </li>

<div class="foo">

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("#Brand > li a")
jQuery("#Brand > li ").find("a") 
ID first then other
jQuery("#Brand").find("li a") 
ID first then find
Get Link with ID selector
Get Link with ID selector and find

Compare results of other browsers


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:


Comment form temporarily disabled.

Add a comment