jQuery selectors speed test (v6)

Revision 6 of this benchmark created on

Description

jQuery attribute selectors speed test

Preparation HTML

<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>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>

Setup

var titles = [];

Test runner

Ready to run.

Testing in
TestOps/sec
.class + Attribute filter
jQuery(".link").each(function() {
  var title = this.getAttribute('title');
  if (title) titles.push(title);
});
ready
tag.class[attribute]
jQuery("a.link[title]").each(function() {
  var title = this.getAttribute('title');
  if (title) titles.push(title);
});
ready
.class[attribute]
jQuery(".link[title]").each(function() {
  var title = this.getAttribute('title');
  if (title) titles.push(title);
});
ready
.class + Filter
jQuery(".link").filter('[title]').each(function() {
  var title = this.getAttribute('title');
  if (title) titles.push(title);
});
ready
tag.class + Filter
jQuery("a.link").filter('[title]').each(function() {
  var title = this.getAttribute('title');
  if (title) titles.push(title);
});
ready
querySelectoAll
jQuery( document.querySelectorAll(".link[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.