DOM class speed measures (v3)

Revision 3 of this benchmark created on

Preparation HTML

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

Setup

const MAX=10;
function create(ofType, havingProperties, withParent) {
	const elmt = document.createElement(ofType);

	if (havingProperties) {
		Object.entries(havingProperties).forEach(([key, value]) => {
			if (key === 'classes') {
				elmt.classList.add(...value);
			} else {
				elmt[key] = value;
			}
		});
	}

	if (withParent) {
		withParent.appendChild(elmt);
	}

	return elmt;
}

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

Teardown

document.getElementById('test'),innerHTML = '';

Test runner

Ready to run.

Testing in
TestOps/sec
Method implementation
const testElement = document.getElementById('test');
	const topBar = create('div', {classes: ['topBar']});
	const messageArea= create('div', { id: 'MessageArea', textContent: 'MessageArea' }, topBar);
	const container = create('div', { classes: ['container'] }, messageArea);
	const ul = create('ul', undefined, container);
	const li = create('li', { id: 'clearFilter' }, ul);
	const span = create('span', { id: 'clearFilterIcon', classes: ['option', 'icon'] }, li);
	const ul2 = create('ul', { id: 'clearFilterDropDown', classes: ['dropdown']}, ul);
	const h3 = create('h3', { text:'Clear all filters:' });
	testElement.appendChild(topBar);
ready
Vanilla implementation
const testElement = document.getElementById('test');

	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.