Benchmark: El vs Custom El - MeasureThat.net

HTML Preparation code:

<script>
	
	const size = 1000;

	class MyButton extends HTMLElement {
		constructor(props) {
			super(props);
			const root = this.attachShadow({ mode: 'open' });

			var btnEl = document.createElement('button');
			btnEl.innerHTML = 'Normal Button';
			btnEl.style.background = 'green';
			btnEl.style.padding = '10px';

			root.appendChild(btnEl);
		}
	}
	customElements.define('my-button', MyButton);


	function addCustomElements(count) {
		for (var a = 0; a < count; a++) {
			var el = document.createElement('my-button');
			document.body.appendChild(el);
		}
	}

	function addNormalElements(count) {
		for (var a = 0; a < count; a++) {
			var el = document.createElement('button');
			el.innerHTML = 'Normal Button';
			el.style.background = 'green';
			el.style.padding = '10px';
			document.body.appendChild(el);
		}
	}


	const querySelectorDeep = (selector, rootEl) => {
		rootEl = rootEl || window.document.body;

		let matches = [];

		// Child nodes
		const childNodes = rootEl.childNodes;
		for (let i = 0; i < childNodes.length; i++) {
			matches = matches.concat(querySelectorDeep(selector, childNodes[i]));
			if (childNodes[i].matches && childNodes[i].matches(selector)) {
				matches.push(childNodes[i]);
			}
		}

		// Shadow root
		if (rootEl.shadowRoot) {
			matches = matches.concat(querySelectorDeep(selector, rootEl.shadowRoot));
		}

		return matches;
	};


	function prepareCustomElements() {
		addElementToBody('my-button', size);
	}

	function prepareNormalElements() {
		addElementToBody('button', size);
	}


	prepareCustomElements();
	prepareNormalElements();

</script>

Tests:

Querying Els
querySelectorDeep('my-button');
Normal Els
document.querySelectorAll('my-button');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Querying Els
Normal Els

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript benchmarks!

**Benchmark Definition**

The benchmark is defined by two scripts that create and append HTML elements to the document body. There are two types of elements: custom elements (`my-button`) and standard HTML elements (`button`).

1. **Custom Elements**: The script creates a `MyButton` class that extends `HTMLElement`. This allows for more control over the element's appearance and behavior. Custom elements are defined using the `customElements.define()` method.
2. **Standard HTML Elements**: Standard HTML elements, like buttons, are created using the `document.createElement()` method.

The benchmark consists of two test cases:

1. **Querying Custom Elements (`querySelectorDeep('my-button')`)**: This test case queries all custom elements with the class `my-button` on the document body.
2. **Querying Standard HTML Elements (`document.querySelectorAll('button')`)**: This test case queries all standard HTML buttons on the document body.

**Options Compared**

Two options are compared in this benchmark:

1. **Custom Elements**: Using `customElements.define()` to create custom elements, which provides more control over the element's appearance and behavior.
2. **Standard HTML Elements**: Using `document.createElement()` to create standard HTML elements, which is a simpler and more widely supported approach.

**Pros and Cons**

Here are some pros and cons of each approach:

**Custom Elements**

Pros:

* More control over the element's appearance and behavior
* Can be used to create complex UI components

Cons:

* May require additional setup and configuration
* Not all browsers support custom elements out of the box

**Standard HTML Elements**

Pros:

* Widely supported by most browsers
* Simple and easy to use
* No additional setup or configuration required

Cons:

* Less control over the element's appearance and behavior
* May not be suitable for complex UI components

**Other Considerations**

1. **Shadow DOM**: The custom elements in this benchmark use shadow DOM, which allows for more control over the element's appearance and behavior. However, this also means that the element is not part of the document body, and may require additional setup to query.
2. **Querying Custom Elements**: Querying custom elements using `querySelectorDeep()` can be slower than querying standard HTML elements using `document.querySelectorAll()`, since it needs to traverse the DOM tree to find the elements.

**Library Used**

In this benchmark, a library is not explicitly mentioned. However, the use of `customElements.define()` and `querySelectorDeep()` suggests that the benchmark is using modern JavaScript features and libraries that provide additional functionality for working with custom elements.

**Special JS Features or Syntax**

The benchmark uses some special JavaScript features and syntax:

1. **Class-based inheritance**: The `MyButton` class extends `HTMLElement`, which allows for class-based inheritance.
2. **Shadow DOM**: Shadow DOM is used to create a separate DOM tree for the custom element, which can improve performance and control over the element's appearance and behavior.

Overall, this benchmark provides an interesting comparison between two approaches: using custom elements with more control over the element's appearance and behavior, versus using standard HTML elements with less control but wider browser support.

Related benchmarks:

El vs Custom El (version: 0)

Comparing performance of: Querying Els vs Normal Els

Created: 6 years ago by: Guest

Jump to the latest result

Querying Els

Normal Els

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):