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 speed (v20)

Revision 20 of this benchmark created by Ryan Graham on September 21, 2011

Preparation HTML

<div id="container1">
  <ul>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li id="foo">
      3
    </li>
    <li>
      1
    </li>
    <li id="one-two-three">
      3
    </li>
    <li id="targetid22">
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
  </ul>
</div>

<div id="container1">
  <ul>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li id="foo">
      3
    </li>
    <li>
      1
    </li>
    <li id="one-two-three">
      3
    </li>
    <li id="targetid22">
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
  </ul>
</div>

<div id="container1">
  <ul>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li id="foo">
      3
    </li>
    <li>
      1
    </li>
    <li id="one-two-three">
      3
    </li>
    <li id="targetid22">
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
  </ul>
</div>

<div id="container1">
  <ul>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li id="foo">
      3
    </li>
    <li>
      1
    </li>
    <li id="one-two-three">
      3
    </li>
    <li id="targetid22">
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
  </ul>
</div>

<div id="container">
  <ul>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li id="foo">
      3
    </li>
    <li>
      1
    </li>
    <li id="targetid" class="target">
      2
    </li>
    <li id="one-two-three">
      3
    </li>
    <li id="targetid22">
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
  </ul>
</div><div id="container1">
  <ul>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li id="foo">
      3
    </li>
    <li>
      1
    </li>
    <li id="one-two-three">
      3
    </li>
    <li id="targetid22">
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
  </ul>
</div>
<div id="container1">
  <ul>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li id="foo">
      3
    </li>
    <li>
      1
    </li>
    <li id="one-two-three">
      3
    </li>
    <li id="targetid22">
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
  </ul>
</div>
<div id="container1">
  <ul>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li id="foo">
      3
    </li>
    <li>
      1
    </li>
    <li id="one-two-three">
      3
    </li>
    <li id="targetid22">
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
  </ul>
</div>
<div id="container1">
  <ul>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li id="foo">
      3
    </li>
    <li>
      1
    </li>
    <li id="one-two-three">
      3
    </li>
    <li id="targetid22">
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      1
    </li>
    <li class="target2">
      2
    </li>
    <li>
      3
    </li>
  </ul>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

Test runner

Ready to run.

Testing in
Test		Ops/sec
$('div#container ul li.target')	`$('div#container ul li.target').css('border', '1px solid red');`	ready
$('#container .target')	`$('#container .target').css('border', '1px solid red');`	ready
$('.target:eq(0)')	`$('.target:eq(0)').css('border', '1px solid red');`	ready
$('.target')	`$('.target').css('border', '1px solid red');`	ready
$('.target:first')	`$('.target:first').css('border', '1px solid red');`	ready
$('#targetid')	`$('#targetid').css('border', '1px solid red');`	ready
getElementById	`var e = document.getElementById('targetid'); $(e).css('border', '1px solid red');`	ready
$('li#targetid')	`$('li#targetid').css('border', '1px solid red');`	ready
$('li.target')	`$('li.target').css('border', '1px solid red');`	ready
$('.target', '#container')	`$('.target', '#container').css('border', '1px solid red');`	ready
$('.target', $('#container'))	`$('.target', $('#container')).css('border', '1px solid red');`	ready
$("#container").find(".target")	`$("#container").find(".target").css('border', '1px solid red');`	ready

Revisions

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

Revision 1: published by AlienWebguy on July 26, 2011
Revision 2: published on July 26, 2011
Revision 3: published on July 26, 2011
Revision 4: published on July 26, 2011
Revision 5: published on July 26, 2011
Revision 6: published on July 26, 2011
Revision 7: published on July 26, 2011
Revision 8: published on July 28, 2011
Revision 9: published on July 28, 2011
Revision 10: published on August 12, 2011
Revision 11: published on August 16, 2011
Revision 13: published on August 31, 2011
Revision 14: published on August 31, 2011
Revision 16: published on September 9, 2011
Revision 17: published on September 13, 2011
Revision 18: published by Jordan on September 14, 2011
Revision 19: published on September 21, 2011
Revision 20: published by Ryan Graham on September 21, 2011
Revision 21: published on September 27, 2011
Revision 22: published by SkeLLLa on November 1, 2011
Revision 23: published by SkeLLLa on November 1, 2011
Revision 24: published by sb on November 2, 2011
Revision 25: published by Tony on November 2, 2011
Revision 27: published on November 10, 2011
Revision 28: published by Guhe Louis on November 22, 2011
Revision 29: published on December 2, 2011
Revision 30: published by Paul Grenier on December 2, 2011
Revision 32: published on December 9, 2011
Revision 33: published on December 15, 2011
Revision 34: published on December 15, 2011
Revision 35: published on December 15, 2011
Revision 36: published on January 9, 2012
Revision 37: published on January 18, 2012
Revision 40: published on January 31, 2012
Revision 41: published by Tom Taylor on February 1, 2012
Revision 43: published by Jérôme Tamarelle on February 13, 2012
Revision 45: published on March 15, 2012
Revision 46: published by Mike Smith on March 19, 2012
Revision 47: published on April 2, 2012
Revision 48: published on April 2, 2012
Revision 49: published on April 2, 2012
Revision 50: published by Ludwig on April 9, 2012
Revision 51: published on April 10, 2012
Revision 52: published on April 13, 2012
Revision 53: published on April 13, 2012
Revision 54: published on April 17, 2012
Revision 55: published on April 17, 2012
Revision 56: published on April 17, 2012
Revision 57: published on April 27, 2012
Revision 58: published on April 27, 2012
Revision 59: published on June 5, 2012
Revision 60: published on June 23, 2012
Revision 61: published by John Marty on June 28, 2012
Revision 63: published on July 10, 2012
Revision 65: published on July 18, 2012
Revision 66: published on August 5, 2012
Revision 70: published by mateus on September 4, 2012
Revision 72: published on September 4, 2012
Revision 73: published by mateus on September 5, 2012
Revision 74: published by mateus on September 5, 2012
Revision 75: published on September 5, 2012
Revision 78: published on September 28, 2012
Revision 79: published on October 2, 2012
Revision 80: published on November 6, 2012
Revision 81: published on November 6, 2012
Revision 82: published on November 7, 2012
Revision 83: published by Payrouse Nicolas on November 7, 2012
Revision 84: published by Payrouse Nicolas on November 7, 2012
Revision 85: published on November 21, 2012
Revision 86: published on December 3, 2012
Revision 87: published on December 13, 2012
Revision 88: published on February 7, 2013
Revision 91: published on April 23, 2013
Revision 92: published on June 4, 2013
Revision 93: published on September 9, 2013
Revision 94: published on September 30, 2013
Revision 96: published on December 9, 2013
Revision 97: published by Christian on December 23, 2013
Revision 98: published on January 20, 2014
Revision 99: published on January 21, 2014
Revision 100: published on January 27, 2014
Revision 101: published on February 5, 2014
Revision 102: published on February 5, 2014
Revision 103: published on February 5, 2014
Revision 104: published on February 5, 2014
Revision 106: published on February 20, 2014
Revision 108: published by Name selectors on March 11, 2014
Revision 109: published on March 12, 2014
Revision 110: published on March 17, 2014
Revision 111: published on March 19, 2014
Revision 112: published by Daniel Sherson on March 19, 2014
Revision 113: published on March 25, 2014
Revision 115: published by Denis on October 15, 2014