jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.

jsperf.com URLs are mirrored at the same path, e.g:

https://jsperf.com/negative-modulo/2

Can be accessed at:

https://jsperf.app/negative-modulo/2

jQuery Selector Attr vs Class (v11)

Revision 11 of this benchmark created on July 5, 2013

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
  li {display: inline-block;}
</style>
<form>
  <ul>
    <li>
      <input type=hidden name=name[0] value=0 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[1] value=1 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[2] value=2 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[3] value=3 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[4] value=4 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[5] value=5 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[6] value=6 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[7] value=7 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[8] value=8 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[9] value=9 class=select>
      <label><input type=checkbox>check</label>
  </ul>
  <ul>
    <li>
      <input type=hidden name=name[0] value=0 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[1] value=1 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[2] value=2 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[3] value=3 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[4] value=4 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[5] value=5 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[6] value=6 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[7] value=7 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[8] value=8 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[9] value=9 class=select>
      <label><input type=checkbox>check</label>
  </ul>
  <ul>
    <li>
      <input type=hidden name=name[0] value=0 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[1] value=1 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[2] value=2 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[3] value=3 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[4] value=4 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[5] value=5 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[6] value=6 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[7] value=7 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[8] value=8 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[9] value=9 class=select>
      <label><input type=checkbox>check</label>
  </ul>
  <ul>
    <li>
      <input type=hidden name=name[0] value=0 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[1] value=1 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[2] value=2 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[3] value=3 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[4] value=4 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[5] value=5 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[6] value=6 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[7] value=7 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[8] value=8 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[9] value=9 class=select>
      <label><input type=checkbox>check</label>
  </ul>
  <ul>
    <li>
      <input type=hidden name=name[0] value=0 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[1] value=1 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[2] value=2 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[3] value=3 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[4] value=4 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[5] value=5 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[6] value=6 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[7] value=7 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[8] value=8 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[9] value=9 class=select>
      <label><input type=checkbox>check</label>
  </ul>
  <ul>
    <li>
      <input type=hidden name=name[0] value=0 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[1] value=1 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[2] value=2 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[3] value=3 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[4] value=4 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[5] value=5 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[6] value=6 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[7] value=7 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[8] value=8 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[9] value=9 class=select>
      <label><input type=checkbox>check</label>
  </ul>
  <ul>
    <li>
      <input type=hidden name=name[0] value=0 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[1] value=1 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[2] value=2 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[3] value=3 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[4] value=4 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[5] value=5 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[6] value=6 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[7] value=7 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[8] value=8 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[9] value=9 class=select>
      <label><input type=checkbox>check</label>
  </ul>
  <ul>
    <li>
      <input type=hidden name=name[0] value=0 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[1] value=1 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[2] value=2 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[3] value=3 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[4] value=4 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[5] value=5 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[6] value=6 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[7] value=7 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[8] value=8 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[9] value=9 class=select>
      <label><input type=checkbox>check</label>
  </ul>
  <ul>
    <li>
      <input type=hidden name=name[0] value=0 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[1] value=1 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[2] value=2 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[3] value=3 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[4] value=4 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[5] value=5 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[6] value=6 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[7] value=7 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[8] value=8 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[9] value=9 class=select>
      <label><input type=checkbox>check</label>
  </ul>
  <ul>
    <li>
      <input type=hidden name=name[0] value=0 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[1] value=1 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[2] value=2 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[3] value=3 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[4] value=4 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[5] value=5 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[6] value=6 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[7] value=7 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[8] value=8 class=select>
      <label><input type=checkbox>check</label>
    <li>
      <input type=hidden name=name[9] value=9 class=select>
      <label><input type=checkbox>check</label>
  </ul>
</form>

Test runner

Ready to run.

Testing in
Test		Ops/sec
Select by Class	`$('.select')`	ready
Select by Attr	`$('input[name]')`	ready
Select by Attr only	`$('[name]')`	ready
Select by Child Element	`$('li > input')`	ready

Revisions

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

Revision 1: published by jsantell on September 26, 2011
Revision 2: published on March 1, 2012
Revision 3: published on April 2, 2012
Revision 4: published on April 2, 2012
Revision 5: published on April 2, 2012
Revision 7: published on December 20, 2012
Revision 8: published on June 26, 2013
Revision 9: published on June 26, 2013
Revision 11: published on July 5, 2013