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
<div id="foo">
<h6>Element</h6>
<div class="bar">Class</div>
<div id="bar">Sub-ID</div>
<input type="text" value="FooBar">
<span id="hidden" style="display:none;">Hidden</span>
<ul itemprop="list" id="ul" class="ul">
<li class="li">One</li>
<li class="li">Two</li>
<li class="li">Three</li>
<li class="li">Four</li>
<li class="li">Five</li>
<li class="li">Six</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>var testObj;
(function($){
testObj = {
idTest : function ( test ) {
switch ( test ) {
case 0:
return $('#foo');
case 1:
return document.getElementById('foo'); // Native ID
case 2:
return $('#bar'); // Straight to child (ID)
case 3:
return $('#foo').find('#bar'); // Grab top ID and find child ID
case 4:
return $('[itemprop=list]'); // Context
case 5:
return document.getElementById('bar'); // Native ID
case 6:
return document.querySelector('#foo'); // querySelector
case 7:
return document.querySelector('#bar');
default:
break;
}
},
elemTest : function ( test ) {
switch ( test ) {
case 0:
return $('span');
case 1:
return $('span#hidden'); // Span element with an ID of hidden
case 2:
return $('#foo').find('span'); // Find span of #foo
case 3:
return $('span', '#foo'); // Context
case 4:
return document.getElementsByTagName('span'); // Native
case 5:
return document.querySelector('span'); // querySelector
case 6:
return document.querySelectorAll('div'); // querySelectorAll
case 7:
return $('div'); // jQuery return all DIVs
default:
break;
}
},
classTest : function ( test ) {
switch ( test ) {
case 0:
return $('.bar'); // Straight to .bar, one level down from #foo
case 1:
return $('#foo').find('.bar'); // Grab #foo, find .bar
case 2:
return $('.bar', '#foo'); // Context
case 3:
return $('div.bar') // Div with a class of bar
case 4:
return $('div').filter('.bar'); // Filter class from elem
case 5:
return $('.li'); // Get all .li, two levels down from #foo
case 6:
return $('li.li'); // List item with a class of li
case 7:
return $('#ul').find('.li'); // id #ul, find class of li
case 8:
return $('li').filter('.li') // Get all list items and filter those with a class of .li
case 9:
return document.getElementsByClassName('bar'); // Native, doesn't work in old IE
case 10:
return document.querySelectorAll('.bar') // querySelectorAll
default:
break;
}
}
};
})(jQuery);Ready to run.
| Test | Ops/sec | |
|---|---|---|
| jQuery Single Element | | ready |
| jQuery Span and ID | | ready |
| jQuery grab #foo then find span | | ready |
| jQuery ID and Element Context | | ready |
| Native Element Selection | | ready |
| Native querySelector | | ready |
| Native querySelectorAll | | ready |
| jQuery version of querySelectorAll | | ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.