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. Modified to remove getElementById, getElementsByTagName and getElementsByClassName as they were so fast it made the other results difficult to see.
<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 | |
|---|---|---|
| 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.