id vs class vs tag vs pseudo vs. attribute selectors (v276)

Revision 276 of this benchmark created on

Description

Comparing the performance difference of varied jQuery 2 selectors.

This test page contains some dummy HTML (from html-ipsum.com) just to give the page some weight, make the selectors work a little bit.

Note that the "Tag" selector is selecting a tag that happens to be unique in the page just to be fair.

Preparation HTML

<script src="https://code.jquery.com/jquery-git2.min.js"></script>

<style type="text/css"> .bar { display: none; } </style>
<h1> HTML Ipsum Presents </h1>

<p>
  <strong>
    Pellentesque habitant morbi tristique
  </strong>
  senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam,
  feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam
  egestas semper.
  <em>
    Aenean ultricies mi vitae est.
  </em>
  Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.
  Vestibulum erat wisi, condimentum sed,
  <code>
    commodo vitae
  </code>
  , ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
  ipsum rutrum orci, sagittis tempus lacus enim ac dui.
  <a href="#">Donec non enim</a>
  in turpis pulvinar facilisis. Ut felis.
</p>

<h2>
  Header Level 2
</h2>
<ol>
  <li>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  </li>
  <li>
    Aliquam tincidunt mauris eu risus.
  </li>
</ol>
<blockquote id="foo1" class="bar" name="baz">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in
  </p>
</blockquote>
<blockquote id="foo2" class="bar" name="baz">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in
  </p>
</blockquote>
<blockquote id="foo3" class="bar" name="baz">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in
  </p>
</blockquote>
<h3>
  Header Level 3
</h3>
<ul>
  <li>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  </li>
  <li>
    Aliquam tincidunt mauris eu risus.
  </li>
</ul>
<pre>
  <code>
    #header h1 a { display: block; width: 300px; height: 80px; }
  </code>
</pre>

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery ID
$("#foo1");
$("#foo2");
$("#foo3");
ready
jQuery Tag
$("blockquote");
ready
jQuery Class
$(".bar");
ready
jQuery attribute
$("[name='baz']");
ready
jQuery Pseudo-selector
$(":hidden");
ready
jQ ID Combined
$("#foo1, #foo2, #foo3");
ready
jQ ID add
$("#foo1").add("#foo2").add("#foo3")
ready

Revisions

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