Info

Comparing the performance difference of varied jQuery 1.7 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 code

<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="foo" class="bar" name="baz">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in
    mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa.
    Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus
    turpis elit sit amet quam. Vivamus pretium ornare est.
  </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>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

Preparation code output

  
    #header h1 a { display: block; width: 300px; height: 80px; }
  

Test runner

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

Java applet disabled.

$("#foo");

$("blockquote");

$(".bar");

$("[name='baz']");

$(":hidden");

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:

• Revision 1: published on 26th November 2011
• Revision 2: published by Scott Kosman on 27th November 2011
• Revision 3: published on 13th December 2011
• Revision 4: published on 13th December 2011
• Revision 5: published by Jozef on 13th December 2011
• Revision 6: published on 13th December 2011
• Revision 7: published on 13th December 2011
• Revision 8: published on 13th December 2011
• Revision 9: published on 13th December 2011
• Revision 10: published by Rob on 13th December 2011
• Revision 11: published on 13th December 2011
• Revision 12: published by Ben Plum on 13th December 2011
• Revision 13: published on 14th December 2011
• Revision 14: published on 14th December 2011
• Revision 15: published on 14th December 2011
• Revision 16: published by Felipe on 15th December 2011
• Revision 17: published by Chris McKee on 15th December 2011
• Revision 18: published by Mohnish Thallavajhula on 15th December 2011
• Revision 19: published on 15th December 2011
• Revision 20: published on 11th January 2012
• Revision 21: published on 15th January 2012
• Revision 22: published on 22nd February 2012
• Revision 23: published on 26th February 2012
• Revision 24: published by Lennon Carvalho on 27th February 2012
• Revision 26: published by Levi on 12th March 2012
• Revision 27: published on 16th March 2012
• Revision 28: published on 17th March 2012
• Revision 29: published on 22nd March 2012
• Revision 30: published 2 days ago

0 comments