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
Testing if default parameters are fast, if object entries are fast, if destructuring is fast, or if normal parameters are fast
<div id="container">
</div>
const threeClasses = ["class3", "class2", "class1"];
const oneClass = ["class4"];
const MAX_ELEMENTS = 20_000;
const container = document.getElementById("container");
const idStr = "InnerText";
function createStandard(elementType, id, classes, innerText) {
var elmt = document.createElement(elementType);
if(classes)
elmt.classList.add(classes);
if(innerText)
elmt.innerText = innerText;
if(id)
elmt.id = id;
return elmt;
}
function createStandardWithDefaultParams(elementType, id = 0, classes = [], innerText = "") {
var elmt = document.createElement(elementType);
elmt.classList.add(classes);
elmt.innerText = innerText;
elmt.id = id;
return elmt;
}
function createDestructured(elementType, {id, classes, innerText}) {
var elmt = document.createElement(elementType);
if(classes)
elmt.classList.add(classes);
if(innerText)
elmt.innerText = innerText;
if(id)
elmt.id = id;
return elmt;
}
function createDestructuredWithDefaultParameters( elementType, {id=0, classes=[], innerText=""}) {
var elmt = document.createElement(elementType);
elmt.classList.add(classes);
elmt.innerText = innerText;
elmt.id = id;
return elmt;
}
function createElementProperties(element, properties) {
var elmt = document.createElement(element);
for (var prop in properties) {
if(prop === "classes") {
elmt.classList.add(...properties[prop]);
continue;
}
elmt[prop] = properties[prop];
}
return elmt;
}
Ready to run.
Test | Ops/sec | |
---|---|---|
create standard (ID, three classes, innerText) |
| ready |
create standard with default params (IDs, three classes, innerText) |
| ready |
create destructured (IDs, one class, innerText) |
| ready |
create destructured with default params (IDs, one class, innertext) |
| ready |
create object props with IDs (IDs, one class, innerText) |
| ready |
create standard (ID, one class, innerText) |
| ready |
create standard (ID, no class, innerText) |
| ready |
create standard with default params (IDs, one class, innerText) |
| ready |
create standard with default params (IDs, no class, innerText) |
| ready |
create inline (ID, three classes, innerText) |
| ready |
create destructured (IDs, three classes, innerText) |
| ready |
create destructured (IDs, no classes, innerText) |
| ready |
create destructured with default params (IDs, three classes, innertext) |
| ready |
create destructured with default params (IDs, no classes, innertext) |
| ready |
Create object props (IDs, three classes, innerText) |
| ready |
Create object props (IDs, no classes, innerText) |
| ready |
Create inline (IDs, one class, innerText) |
| ready |
Create inline (IDs, no classes, innerText) |
| ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.