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

various selectors

Benchmark created by Jonz on March 25, 2011

Description

Compare performance of using more complicated node traversal vs. just letting sizzle do all the work

Preparation HTML

<div id="families">

<ul id="family_1" class="family">
  <li>
    <div>
      <a href="#" class="jump">jump</a>
      <a href="#" class="dance">dance</a>
      <a href="#" class="die">die</a>
    </div>
    <div>
      <div>head</div>
      <div>eyes</div>
      <div>nose</div>
      <div>mouth</div>
      <div>ears</div>
      <div>tongue</div>
      <div>shoulders</div>
      <div>body</div>
      <div>arms</div>
      <div>fingers</div>
      <div>thumbs</div>
      <div>hands</div>
      <div>legs</div>
      <div>feet</div>
    </div>
  </li>
  <li>
    <div>
      <a href="#" class="jump">jump</a>
      <a href="#" class="dance">dance</a>
      <a href="#" class="die">die</a>
    </div>
    <div>
      <div>head</div>
      <div>eyes</div>
      <div>nose</div>
      <div>mouth</div>
      <div>ears</div>
      <div>tongue</div>
      <div>shoulders</div>
      <div>body</div>
      <div>arms</div>
      <div>fingers</div>
      <div>thumbs</div>
      <div>hands</div>
      <div>legs</div>
      <div>feet</div>
    </div>
  </li>
  <li>
    <div>
      <a href="#" class="jump">jump</a>
      <a href="#" class="dance">dance</a>
      <a href="#" class="die">die</a>
    </div>
    <div>
      <div>head</div>
      <div>eyes</div>
      <div>nose</div>
      <div>mouth</div>
      <div>ears</div>
      <div>tongue</div>
      <div>shoulders</div>
      <div>body</div>
      <div>arms</div>
      <div>fingers</div>
      <div>thumbs</div>
      <div>hands</div>
      <div>legs</div>
      <div>feet</div>
    </div>
  </li>
  <li>
    <div>
      <a href="#" class="jump">jump</a>
      <a href="#" class="dance">dance</a>
      <a href="#" class="die">die</a>
    </div>
    <div>
      <div>head</div>
      <div>eyes</div>
      <div>nose</div>
      <div>mouth</div>
      <div>ears</div>
      <div>tongue</div>
      <div>shoulders</div>
      <div>body</div>
      <div>arms</div>
      <div>fingers</div>
      <div>thumbs</div>
      <div>hands</div>
      <div>legs</div>
      <div>feet</div>
    </div>
  </li>
  <li>
    <div>
      <a href="#" class="jump">jump</a>
      <a href="#" class="dance">dance</a>
      <a href="#" class="die">die</a>
    </div>
    <div>
      <div>head</div>
      <div>eyes</div>
      <div>nose</div>
      <div>mouth</div>
      <div>ears</div>
      <div>tongue</div>
      <div>shoulders</div>
      <div>body</div>
      <div>arms</div>
      <div>fingers</div>
      <div>thumbs</div>
      <div>hands</div>
      <div>legs</div>
      <div>feet</div>
    </div>
  </li>
</ul>

<ul id="family_2" class="family">
  <li>
    <div>
      <a href="#" class="jump">jump</a>
      <a href="#" class="dance">dance</a>
      <a href="#" class="die">die</a>
    </div>
    <div>
      <div>head</div>
      <div>eyes</div>
      <div>nose</div>
      <div>mouth</div>
      <div>ears</div>
      <div>tongue</div>
      <div>shoulders</div>
      <div>body</div>
      <div>arms</div>
      <div>fingers</div>
      <div>thumbs</div>
      <div>hands</div>
      <div>legs</div>
      <div>feet</div>
    </div>
  </li>
  <li>
    <div>
      <a href="#" class="jump">jump</a>
      <a href="#" class="dance">dance</a>
      <a href="#" class="die">die</a>
    </div>
    <div>
      <div>head</div>
      <div>eyes</div>
      <div>nose</div>
      <div>mouth</div>
      <div>ears</div>
      <div>tongue</div>
      <div>shoulders</div>
      <div>body</div>
      <div>arms</div>
      <div>fingers</div>
      <div>thumbs</div>
      <div>hands</div>
      <div>legs</div>
      <div>feet</div>
    </div>
  </li>
  <li>
    <div>
      <a href="#" class="jump">jump</a>
      <a href="#" class="dance">dance</a>
      <a href="#" class="die">die</a>
    </div>
    <div>
      <div>head</div>
      <div>eyes</div>
      <div>nose</div>
      <div>mouth</div>
      <div>ears</div>
      <div>tongue</div>
      <div>shoulders</div>
      <div>body</div>
      <div>arms</div>
      <div>fingers</div>
      <div>thumbs</div>
      <div>hands</div>
      <div>legs</div>
      <div>feet</div>
    </div>
  </li>
  <li>
    <div>
      <a href="#" class="jump">jump</a>
      <a href="#" class="dance">dance</a>
      <a href="#" class="die">die</a>
    </div>
    <div>
      <div>head</div>
      <div>eyes</div>
      <div>nose</div>
      <div>mouth</div>
      <div>ears</div>
      <div>tongue</div>
      <div>shoulders</div>
      <div>body</div>
      <div>arms</div>
      <div>fingers</div>
      <div>thumbs</div>
      <div>hands</div>
      <div>legs</div>
      <div>feet</div>
    </div>
  </li>
  <li>
    <div>
      <a href="#" class="jump">jump</a>
      <a href="#" class="dance">dance</a>
      <a href="#" class="die">die</a>
    </div>
    <div>
      <div>head</div>
      <div>eyes</div>
      <div>nose</div>
      <div>mouth</div>
      <div>ears</div>
      <div>tongue</div>
      <div>shoulders</div>
      <div>body</div>
      <div>arms</div>
      <div>fingers</div>
      <div>thumbs</div>
      <div>hands</div>
      <div>legs</div>
      <div>feet</div>
    </div>
  </li>
</ul>

<ul id="family_3" class="family">
  <li>
    <div>
      <a href="#" class="jump">jump</a>
      <a href="#" class="dance">dance</a>
      <a href="#" class="die">die</a>
    </div>
    <div>
      <div>head</div>
      <div>eyes</div>
      <div>nose</div>
      <div>mouth</div>
      <div>ears</div>
      <div>tongue</div>
      <div>shoulders</div>
      <div>body</div>
      <div>arms</div>
      <div>fingers</div>
      <div>thumbs</div>
      <div>hands</div>
      <div>legs</div>
      <div>feet</div>
    </div>
  </li>
  <li>
    <div>
      <a href="#" class="jump">jump</a>
      <a href="#" class="dance">dance</a>
      <a href="#" class="die">die</a>
    </div>
    <div>
      <div>head</div>
      <div>eyes</div>
      <div>nose</div>
      <div>mouth</div>
      <div>ears</div>
      <div>tongue</div>
      <div>shoulders</div>
      <div>body</div>
      <div>arms</div>
      <div>fingers</div>
      <div>thumbs</div>
      <div>hands</div>
      <div>legs</div>
      <div>feet</div>
    </div>
  </li>
  <li>
    <div>
      <a href="#" class="jump">jump</a>
      <a href="#" class="dance">dance</a>
      <a href="#" class="die">die</a>
    </div>
    <div>
      <div>head</div>
      <div>eyes</div>
      <div>nose</div>
      <div>mouth</div>
      <div>ears</div>
      <div>tongue</div>
      <div>shoulders</div>
      <div>body</div>
      <div>arms</div>
      <div>fingers</div>
      <div>thumbs</div>
      <div>hands</div>
      <div>legs</div>
      <div>feet</div>
    </div>
  </li>
  <li>
    <div>
      <a href="#" class="jump">jump</a>
      <a href="#" class="dance">dance</a>
      <a href="#" class="die">die</a>
    </div>
    <div>
      <div>head</div>
      <div>eyes</div>
      <div>nose</div>
      <div>mouth</div>
      <div>ears</div>
      <div>tongue</div>
      <div>shoulders</div>
      <div>body</div>
      <div>arms</div>
      <div>fingers</div>
      <div>thumbs</div>
      <div>hands</div>
      <div>legs</div>
      <div>feet</div>
    </div>
  </li>
  <li>
    <div>
      <a href="#" class="jump">jump</a>
      <a href="#" class="dance">dance</a>
      <a href="#" class="die">die</a>
    </div>
    <div>
      <div>head</div>
      <div>eyes</div>
      <div>nose</div>
      <div>mouth</div>
      <div>ears</div>
      <div>tongue</div>
      <div>shoulders</div>
      <div>body</div>
      <div>arms</div>
      <div>fingers</div>
      <div>thumbs</div>
      <div>hands</div>
      <div>legs</div>
      <div>feet</div>
    </div>
  </li>
</ul>

<ul id="family_1" class="family">
  <li>
    <div>
      <a href="#" class="jump">jump</a>
      <a href="#" class="dance">dance</a>
      <a href="#" class="die">die</a>
    </div>
    <div>
      <div>head</div>
      <div>eyes</div>
      <div>nose</div>
      <div>mouth</div>
      <div>ears</div>
      <div>tongue</div>
      <div>shoulders</div>
      <div>body</div>
      <div>arms</div>
      <div>fingers</div>
      <div>thumbs</div>
      <div>hands</div>
      <div>legs</div>
      <div>feet</div>
    </div>
  </li>
  <li>
    <div>
      <a href="#" class="jump">jump</a>
      <a href="#" class="dance">dance</a>
      <a href="#" class="die">die</a>
    </div>
    <div>
      <div>head</div>
      <div>eyes</div>
      <div>nose</div>
      <div>mouth</div>
      <div>ears</div>
      <div>tongue</div>
      <div>shoulders</div>
      <div>body</div>
      <div>arms</div>
      <div>fingers</div>
      <div>thumbs</div>
      <div>hands</div>
      <div>legs</div>
      <div>feet</div>
    </div>
  </li>
  <li>
    <div>
      <a href="#" class="jump">jump</a>
      <a href="#" class="dance">dance</a>
      <a href="#" class="die">die</a>
    </div>
    <div>
      <div>head</div>
      <div>eyes</div>
      <div>nose</div>
      <div>mouth</div>
      <div>ears</div>
      <div>tongue</div>
      <div>shoulders</div>
      <div>body</div>
      <div>arms</div>
      <div>fingers</div>
      <div>thumbs</div>
      <div>hands</div>
      <div>legs</div>
      <div>feet</div>
    </div>
  </li>
  <li>
    <div>
      <a href="#" class="jump">jump</a>
      <a href="#" class="dance">dance</a>
      <a href="#" class="die">die</a>
    </div>
    <div>
      <div>head</div>
      <div>eyes</div>
      <div>nose</div>
      <div>mouth</div>
      <div>ears</div>
      <div>tongue</div>
      <div>shoulders</div>
      <div>body</div>
      <div>arms</div>
      <div>fingers</div>
      <div>thumbs</div>
      <div>hands</div>
      <div>legs</div>
      <div>feet</div>
    </div>
  </li>
  <li>
    <div>
      <a href="#" class="jump">jump</a>
      <a href="#" class="dance">dance</a>
      <a href="#" class="die">die</a>
    </div>
    <div>
      <div>head</div>
      <div>eyes</div>
      <div>nose</div>
      <div>mouth</div>
      <div>ears</div>
      <div>tongue</div>
      <div>shoulders</div>
      <div>body</div>
      <div>arms</div>
      <div>fingers</div>
      <div>thumbs</div>
      <div>hands</div>
      <div>legs</div>
      <div>feet</div>
    </div>
  </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
.class find tag.class	`$('.family').find('a.jump');`	ready
#id .class tag.class	`$('#families .family a.jump');`	ready
#id find tag find tag.class	`$('#families').find('li').find('a.jump');`	ready
first case, but no tag name	`$('#families').find('.jump');`	ready
just the class	`$('.jump');`	ready
tag and class	`$('a.jump');`	ready
specific over-arching id, followed by general selector	`$('#families').find('.family').find('.jump');`	ready
#id find .class .class	`$('#families').find('.family .jump');`	ready
.class find .class	`$('.family').find('.jump');`	ready

Revisions

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

Revision 1: published by Jonz on March 25, 2011