Create DOM elements performance

Benchmark created on

Description

Testing if default parameters are fast, if object entries are fast, if destructuring is fast, or if normal parameters are fast

Preparation HTML

<div id="container">

</div>

Setup

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;
}

Test runner

Ready to run.

Testing in
TestOps/sec
create standard (ID, three classes, innerText)
for(let i=0; i< MAX_ELEMENTS; i++) {
	createStandard("div", i, threeClasses, idStr);
}
ready
create standard with default params (IDs, three classes, innerText)
for(let i=0; i< MAX_ELEMENTS; i++) {
	createStandardWithDefaultParams("div", i, threeClasses, idStr);
}
ready
create destructured (IDs, one class, innerText)
for(let i=0; i< MAX_ELEMENTS; i++) {
	createDestructured("div", {id:i, classes:oneClass, innerText:idStr});
}
ready
create destructured with default params (IDs, one class, innertext)
for(let i=0; i< MAX_ELEMENTS; i++) {
	createDestructuredWithDefaultParameters("div", {id:i, classes:oneClass, innerText:idStr});
}
ready
create object props with IDs (IDs, one class, innerText)
for(let i=0; i< MAX_ELEMENTS; i++) {
	createElementProperties("div", {id:i, classes:oneClass, innerText: idStr});
}
ready
create standard (ID, one class, innerText)
for(let i=0; i< MAX_ELEMENTS; i++) {
	createStandard("div", i, oneClass, idStr);
}
ready
create standard (ID, no class, innerText)
for(let i=0; i< MAX_ELEMENTS; i++) {
	createStandard("div", i, null, idStr);
}
ready
create standard with default params (IDs, one class, innerText)
for(let i=0; i< MAX_ELEMENTS; i++) {
	createStandardWithDefaultParams("div", i, oneClass, idStr);
}
ready
create standard with default params (IDs, no class, innerText)
for(let i=0; i< MAX_ELEMENTS; i++) {
	createStandardWithDefaultParams("div", i, null, idStr);
}
ready
create inline (ID, three classes, innerText)
for(let i=0; i< MAX_ELEMENTS; i++) {
	var elmt = document.createElement("div");
	elmt.classList.add(threeClasses);
	elmt.innerText = idStr;
	elmt.id = i;
}
ready
create destructured (IDs, three classes, innerText)
for(let i=0; i< MAX_ELEMENTS; i++) {
	createDestructured("div", {id:i, classes:threeClasses, innerText:idStr});
}
ready
create destructured (IDs, no classes, innerText)
for(let i=0; i< MAX_ELEMENTS; i++) {
	createDestructured("div", {id:i, innerText:idStr});
}
ready
create destructured with default params (IDs, three classes, innertext)
for(let i=0; i< MAX_ELEMENTS; i++) {
	createDestructuredWithDefaultParameters("div", {id:i, classes:threeClasses, innerText:idStr});
}
ready
create destructured with default params (IDs, no classes, innertext)
for(let i=0; i< MAX_ELEMENTS; i++) {
	createDestructuredWithDefaultParameters("div", {id:i, innerText:idStr});
}
ready
Create object props (IDs, three classes, innerText)
for(let i=0; i< MAX_ELEMENTS; i++) {
	createElementProperties("div", {id:i, classes:threeClasses, innerText:idStr});
}
ready
Create object props (IDs, no classes, innerText)
for(let i=0; i< MAX_ELEMENTS; i++) {
	createElementProperties("div", {id:i, innerText:idStr});
}
ready
Create inline (IDs, one class, innerText)
for(let i=0; i< MAX_ELEMENTS; i++) {
	var elmt = document.createElement("div");
	elmt.classList.add(oneClass);
	elmt.innerText = idStr;
	elmt.id = i;
}
ready
Create inline (IDs, no classes, innerText)
for(let i=0; i< MAX_ELEMENTS; i++) {
	var elmt = document.createElement("div");
	elmt.innerText = idStr;
	elmt.id = i;
}
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.