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 class .hide() vs javascript iteration (v2)

Revision 2 of this benchmark created by kevin on October 20, 2014

Preparation HTML

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<div>
<style>
.hide {
display:none;
}
</style>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
<span class="test" style="width: 20px; height:10px; background-color: blue;">TEST</span>
</div>

Test runner

Ready to run.

Testing in
Test		Ops/sec
jquery hide	`$('.test').hide();`	ready
javascript iteration	`var elements = document.getElementsByClassName('test'); for (var i = 0; i < elements.length; ++i) { elements [i].style.display = 'none'; }`	ready
class hdie	`$('.test').addClass('hide');`	ready

Revisions

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

Revision 1: published by Pawel on August 20, 2014
Revision 2: published by kevin on October 20, 2014