DOM class speed measures

Benchmark created on

Preparation HTML

<div id="test">
</div>

Setup

const MAX=10;
class Dom {
	constructor(tagName) {
		/** @type {HTMLElement} */
		this.elmt = document.createElement(tagName);
	}

	attr = function(name, value) {		
		this.elmt.setAttribute(name, value);
		return this;
	}

	id(id) {
		this.elmt.id = id;
		return this;
	}

	text(text) {
		this.elmt.textContent = text;
		return this;
	}

	cls(...classes) {
		this.elmt.classList.add(...classes);
		return this;
	}

	onClick(listener) {
		this.elmt.addEventListener('click', listener);
		return this;
	}

	/**
	 * Appends the obj instances to the current DOM
	 * @param {Array<Dom>} children Object to append to current DOM instance
	 * @returns {Dom}
	 */
	append(...children) {
		children.forEach((child) => {
			this.elmt.appendChild(child.toHtml());
		})
		return this;
	}

	toHtml() {
		return this.elmt;
	}
}

Test runner

Ready to run.

Testing in
TestOps/sec
Dom implementation
const testElement = document.getElementById('test');
for(let i=0; i<MAX; i++) {
const elem = 
new Dom('div').cls('topBar').append(
			new Dom('div').id('messageArea').text('Updating...').append(
				new Dom('div').cls('container'),
				new Dom('ul').append(
					new Dom('li').id('clearFilter').append(
						new Dom('span').id('clearFilterIcon').cls('option', 'icon')
					),
					new Dom('ul').id('clearDropdown').cls('dropdown').append(
						new Dom('h3').text('Clear all filters')
					)
				)
			)
		).toHtml();
		testElement.appendChild(elem);
}
ready
Vanilla implementation
const testElement = document.getElementById('test');
for(let i=0; i<MAX;i++) {
	const topBar = document.createElement('div');
	topBar.classList.add('topBar');

	const messageArea = document.createElement('div');
	messageArea.id = 'messageArea';
	messageArea.textContent = 'Updating';
	topBar.appendChild(messageArea);

	const container = document.createElement('div');
	container.classList.add('container');
	messageArea.append(container);

	const ul = document.createElement('ul');
	messageArea.appendChild(ul);

	const clearFilter = document.createElement('li');
	clearFilter.id = 'clearFilter';
	ul.appendChild(clearFilter);

	const span = document.createElement('span');
	span.id = 'clearFilterIcon';
	span.classList.add('option');
	span.classList.add('icon');
	clearFilter.appendChild(span);

	const clearDropdown = document.createElement('ul');
	clearDropdown.id = 'clearDropdown';
	clearDropdown.classList.add('dropdown');
	ul.appendChild(clearDropdown);

	const h3 = document.createElement('h3');
	h3.textContent = 'Clear all filters';
	clearDropdown.appendChild(h3);

	testElement.appendChild(topBar);
	}
ready

Revisions

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