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
Finding the best way to select the first children of each element of a jQuery collection. Based on http://jsperf.com/jquery-first-child-selection-performance/6, but this test selects the first child of multiple elements, always returns a jQuery collection, and includes other markup on the page for more realistic performance.
Queries using .first() or ':first' return only a single element, but have been included for comparison, and because they will work correctly when selecting on a single element.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
var testnodes = '';
for (var i=0; i<20; i++){
testnodes += "<div class='test'></div>";
}
var content = '';
for (var i = 0; i < 500; i++) {
content += '<div class="lkjsf' + i + '"></div>';
}
var otherJunk = '';
for (var i = 0; i < 5000; i++) {
otherJunk += '<div id="junk' + i + '"><div class="junkchild"></div></div>';
}
$('body')
.append(testnodes)
.append(otherJunk);
$('.test').append(content);
$.fn.firstChild = function() {
var ret = [];
this.each(function(){
var el = this.firstChild;
//the DOM firstChild property could return a text node or comment instead of an element
while (el && el.nodeType != 1)
el = el.nextSibling;
if (el) ret.push(el);
});
//maintain jQuery chaining and end() functionality
return this.pushStack(ret);
};
</script>
Ready to run.
Test | Ops/sec | |
---|---|---|
first |
| ready |
direct first |
| ready |
direct first-child |
| ready |
direct nth-child |
| ready |
find first |
| ready |
find direct first |
| ready |
find direct first-child |
| ready |
children first |
| ready |
children first-child |
| ready |
jQuery firstChild |
| ready |
jQuery eq(0) |
| ready |
Native querySelectorAll |
| ready |
children() first() |
| ready |
children[0] |
| ready |
children eq(0) |
| ready |
direct first() |
| ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.