Create DOM elements performance (v4)

Revision 4 of this 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 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 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 object props (IDs, three classes, innerText)
for(let i=0; i< MAX_ELEMENTS; i++) {
	createElementProperties("div", {id:i, classes:threeClasses, innerText:idStr});
}
ready

Revisions

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