jQuery selectors speed test (v4)

Revision 4 of this benchmark created on

Description

jQuery attribute selectors speed test

Preparation HTML

<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>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 id="Brand">
        <li><a href="brand/883-police/"  id="883 Police" title="Select 883 Police" class="link">883 Police</a> </li>
        <li><a href="brand/adidas/"  id="Adidas" title="Select Adidas" class="link">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" class="link">Base</a> </li>
        <li><a href="brand/boxfresh/"  id="Boxfresh" title="Select Boxfresh" class="link">Boxfresh</a> </li>
        <li><a href="brand/breo/"  id="Breo" title="Select Breo" class="link">Breo</a> </li>
        <li><a href="brand/brookhaven/"  id="Brookhaven" title="Select Brookhaven" class="link">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" class="link">Canterbury</a> </li>
        <li><a href="brand/canterbury-lifestyle/"  id="Canterbury Lifestyle" title="Select Canterbury Lifestyle" class="link">Canterbury Lifestyle</a> </li>
        <li><a href="brand/christys/"  id="Christys" title="Select Christys" class="link">Christys</a> </li>
        <li><a href="brand/converse/"  id="Converse" title="Select Converse" class="link">Converse</a> </li>
        <li><a href="brand/deakins/"  id="Deakins" title="Select Deakins" class="link">Deakins</a> </li>
        <li><a href="brand/divine-trash/"  id="Divine Trash" title="Select Divine Trash" class="link">Divine Trash</a> </li>
        <li><a href="brand/dockers/"  id="Dockers" title="Select Dockers" class="link">Dockers</a> </li>
        <li><a href="brand/duck-and-cover/"  id="Duck and Cover" title="Select Duck and Cover" class="link">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" class="link">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" class="link">Fenchurch</a> </li>
        <li><a href="brand/fila/"  id="Fila" title="Select Fila" class="link">Fila</a> </li>
        <li><a href="brand/firetrap/"  id="Firetrap" title="Select Firetrap" class="link">Firetrap</a> </li>
        <li><a href="brand/fly53/"  id="Fly53" title="Select Fly53" class="link">Fly53</a> </li>
        <li><a href="brand/fred-perry/"  id="Fred Perry" title="Select Fred Perry" class="link">Fred Perry</a> </li>
        <li><a href="brand/henleys/"  id="Henleys" title="Select Henleys" class="link">Henleys</a> </li>
        <li><a href="brand/henri-lloyd/"  id="Henri Lloyd" title="Select Henri Lloyd" class="link">Henri Lloyd</a> </li>
        <li><a href="brand/icon-eyewear/"  id="Icon Eyewear" title="Select Icon Eyewear" class="link">Icon Eyewear</a> </li>
        <li><a href="brand/k-swiss/"  id="K-Swiss" title="Select K-Swiss" class="link">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" class="link">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" class="link">New Era</a> </li>
        <li><a href="brand/nicholas-deakins/"  id="Nicholas Deakins" title="Select Nicholas Deakins" class="link">Nicholas Deakins</a> </li>
        <li><a href="brand/nike/"  id="Nike" title="Select Nike" class="link">Nike</a> </li>
        <li><a href="brand/one-true-saxon/"  id="One True Saxon" title="Select One True Saxon" class="link">One True Saxon</a> </li>
        <li><a href="brand/original-penguin/"  id="Original Penguin" title="Select Original Penguin" class="link">Original Penguin</a> </li>
        <li><a href="brand/paul-and-shark/"  id="Paul and Shark" title="Select Paul and Shark" class="link">Paul and Shark</a> </li>
        <li><a href="brand/peter-werth/"  id="Peter Werth" title="Select Peter Werth" class="link">Peter Werth</a> </li>
        <li><a href="brand/pretty-green/"  id="Pretty Green" title="Select Pretty Green" class="link">Pretty Green</a> </li>
        <li><a href="brand/puma/"  id="Puma" title="Select Puma" class="link">Puma</a> </li>
        <li><a href="brand/reebok/"  id="Reebok" title="Select Reebok" class="link">Reebok</a> </li>
        <li><a href="brand/robe-di-kappa/"  id="Robe Di Kappa" title="Select Robe Di Kappa" class="link">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" class="link">Timberland</a> </li>
        <li><a href="brand/two-in-the-shirt/"  id="Two In The Shirt" title="Select Two In The Shirt" class="link">Two In The Shirt</a> </li>
        <li><a href="brand/voi-jeans/"  id="Voi Jeans" title="Select Voi Jeans">Voi Jeans</a> </li>
</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>

Test runner

Ready to run.

Testing in
TestOps/sec
.class + Attribute filter
var titles = [];
jQuery(".link").each(function() {
   var title;
   if (title = this.getAttribute('title')) {
     titles.push(title);
   }
});
ready
tag.class[attribute]
var titles = [];
jQuery("a.link[title]").each(function() {
   var title = this.getAttribute('title');
   titles.push(title);
});
ready
.class[attribute]
var titles = [];
jQuery(".link[title]").each(function() {
   var title = this.getAttribute('title');
   titles.push(title);
});
ready
.class + Filter
var titles = [];
jQuery(".link").filter('[title]').each(function() {
   var title = this.getAttribute('title');
   titles.push(title);
});
ready
tag.class + Filter
var titles = [];
jQuery("a.link").filter('[title]').each(function() {
   var title = this.getAttribute('title');
   titles.push(title);
});
ready

Revisions

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