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

queryselector vs getelementsbyclassname vs jquery (v2)

Revision 2 of this benchmark created on November 14, 2013

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div>
  <ul>
    <li><a href="#" name="name" class="classname subclassname">item 1</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 2</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 3</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 4</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 5</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 6</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 7</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 8</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 9</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 10</a></li>
<li><a href="#" name="name" class="classname subclassname">item 1</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 2</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 3</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 4</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 5</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 6</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 7</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 8</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 9</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 10</a></li>
<li><a href="#" name="name" class="classname subclassname">item 1</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 2</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 3</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 4</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 5</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 6</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 7</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 8</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 9</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 10</a></li>
<li><a href="#" name="name" class="classname subclassname">item 1</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 2</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 3</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 4</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 5</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 6</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 7</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 8</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 9</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 10</a></li>
<li><a href="#" name="name" class="classname subclassname">item 1</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 2</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 3</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 4</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 5</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 6</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 7</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 8</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 9</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 10</a></li>
<li><a href="#" name="name" class="classname subclassname">item 1</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 2</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 3</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 4</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 5</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 6</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 7</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 8</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 9</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 10</a></li>
<li><a href="#" name="name" class="classname subclassname">item 1</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 2</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 3</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 4</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 5</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 6</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 7</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 8</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 9</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 10</a></li>
<li><a href="#" name="name" class="classname subclassname">item 1</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 2</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 3</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 4</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 5</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 6</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 7</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 8</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 9</a></li>
    <li><a href="#" name="name" class="classname subclassname">item 10</a></li>
  </ul>
</div>
<script>
  var nodes;
</script>

Test runner

Ready to run.

Testing in
Test		Ops/sec
querySelector	`var element = document.querySelector('.classname');`	ready
getelementbyclassname	`var element = document.getElementsByClassName('classname')[0];`	ready
jQuery	`var element = $('.classname');`	ready
Pure + jQuery	`var element = document.getElementsByClassName('classname'); var $element = $(element);`	ready

Revisions

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

Revision 2: published on November 14, 2013