Benchmark: Custom Selector vs Document Selector

HTML Preparation code:

<script>
	
	const size = 10000;

	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:

Custom Selector
querySelectorDeep('button');
Document Selector
document.querySelectorAll('button');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Custom Selector
Document Selector

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 break down the benchmark and explain what is being tested.

**Benchmark Overview**

The benchmark compares two ways of selecting elements in JavaScript:

1. **Document Selector**: Using `document.querySelectorAll('button')`
2. **Custom Selector**: Using `querySelectorDeep('button')`

The test case creates a custom HTML element (`my-button`) with a class that extends the native `button` element. The `querySelectorDeep` function is used to select elements using a custom selector.

**What is tested?**

The benchmark measures the performance of both approaches:

1. **Document Selector**: The time it takes for Chrome 84 to execute `document.querySelectorAll('button')`.
2. **Custom Selector**: The time it takes for Chrome 84 to execute `querySelectorDeep('button')`.

**Options compared**

Two options are being compared:

1. Using the native `document.querySelectorAll` method
2. Using a custom function `querySelectorDeep`

**Pros and Cons of each approach:**

**Document Selector (native `document.querySelectorAll`)**

Pros:

* Well-established and widely supported
* Typically faster since it's optimized for performance
* Less overhead compared to custom implementations

Cons:

* May not work as expected if the selector is complex or uses non-standard syntax
* May be slower in certain scenarios, especially with large datasets

**Custom Selector (querySelectorDeep)**

Pros:

* Allows for more flexibility and control over the selection process
* Can be optimized for specific use cases or performance requirements
* May be faster in certain scenarios, especially with simple selectors

Cons:

* Less widely supported and tested compared to native methods
* Requires custom implementation and maintenance
* May have additional overhead due to the custom logic

**Library and its purpose**

In this case, `querySelectorDeep` is a custom function that extends the native `querySelector` method. Its purpose is to provide an alternative way of selecting elements using a deeper search strategy.

**Special JS feature or syntax**

The test uses a special JavaScript feature called "custom elements" (see the script preparation code). Custom elements allow developers to create new HTML elements with unique properties and behavior. In this case, the `my-button` element is created using custom elements, which is used as a testing ground for the `querySelectorDeep` function.

**Other alternatives**

If you were to implement your own selector function, other alternatives could include:

1. Using a library like Sizzle or CSSSelect for DOM selection
2. Implementing a recursive traversal of the DOM tree using a custom loop
3. Utilizing web worker threads for parallel execution of selectors

Keep in mind that each approach has its trade-offs and may require significant development effort to implement correctly.

I hope this explanation helps!

Related benchmarks:

Custom Selector vs Document Selector (version: 0)

Comparing performance of: Custom Selector vs Document Selector

Created: 6 years ago by: Guest

Jump to the latest result

Custom Selector

Document Selector

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):