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
As getElementById, getElementsByTagName and getElementsByClassName are consistently faster than querySelector and querySelectorAll, is it faster to check a CSS string and pass to one of these than simply defaulting to querySelectorAll? All results are converted into an array for more consistency in results.
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div id="test">test</div>var dom = {
toArray: function (nodes) {
var array = [];
if (nodes) {
array = typeof nodes.length === 'number' ?
Array.prototype.slice.call(nodes) :
[nodes];
}
return array;
},
byId: function (id, context) {
var start = context || document;
return this.toArray(start.getElementById(id));
},
byClass: function (className, context) {
var start = context || document;
return this.toArray(start.getElementsByClassName(className));
},
byTag: function (tag, context) {
var start = context || document;
return this.toArray(start.getElementsByTagName(tag));
},
byQuery: function (query, context) {
var start = context || document;
return this.toArray(start.querySelectorAll(query));
},
get: function (query, context) {
var found = null,
name = query.slice(1);
if (/^#\w+$/.test(query)) {
found = this.byId(name, context);
} else if (/^\.\w+$/.test(query)) {
found = this.byClass(name, context);
} else if (/^\w+$/.test(query)) {
found = this.byTag(query, context);
} else {
found = this.byQuery(query, context);
}
return found;
},
get2: function (query, context) {
var reg = /(^#\w+$)|(^\.\w+$)|(^\w+$)/,
match = query.match(reg),
name = query.slice(1),
found = null;
if (match) {
found = match[1] ?
this.byId(name, context) :
match[2] ?
this.byClass(name, context) :
this.byTag(query, context);
} else {
found = this.byQuery(query, context);
}
return found;
}
};Ready to run.
| Test | Ops/sec | |
|---|---|---|
| getElementById | | ready |
| getElementsByClassName | | ready |
| getElementsByTagName | | ready |
| querySelectorAll | | ready |
| get (ID) | | ready |
| get (class) | | ready |
| get (tag) | | ready |
| get (query) | | ready |
| get2 (ID) | | ready |
| get2 (class) | | ready |
| get2 (tag) | | ready |
| get2 (query) | | ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.