Benchmark: Custom Selector vs Document Selector - 2

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 = 'Custom 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() {
		addCustomElements(size);
	}

	function prepareNormalElements() {
		addNormalElements(size);
	}

	prepareCustomElements();
	prepareNormalElements();

</script>

Tests:

Custom QS
querySelectorDeep('my-button');
Document QS
document.querySelectorAll('my-button');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Custom QS
Document QS

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 provided benchmark definition and test cases.

**Benchmark Definition JSON:**

The benchmark definition is testing two approaches to select elements on the webpage:

1. `querySelectorDeep('my-button')`: This function uses a custom implementation called `querySelectorDeep` to select elements recursively, starting from the root element and traversing down to child nodes and shadow roots.
2. `document.querySelectorAll('my-button')`: This function is a built-in method of the Document object in JavaScript, which selects all elements with the specified tag name (`"my-button"`).

**Options Compared:**

The benchmark is comparing two options:

* **Custom QS (querySelectorDeep)**: The custom implementation uses recursion to traverse down to child nodes and shadow roots. This approach allows for more flexibility but might be slower due to the overhead of recursive function calls.
* **Document QS**: The built-in `document.querySelectorAll` method, which uses a more efficient algorithm optimized by the browser.

**Pros and Cons of Each Approach:**

* **Custom QS (querySelectorDeep)**:
	+ Pros:
		- More flexible and can handle complex selectors with nested conditions.
		- Can be useful for specific use cases where built-in methods don't meet requirements.
	+ Cons:
		- Might be slower due to the overhead of recursive function calls.
		- Requires more code and maintenance compared to built-in methods.
* **Document QS**:
	+ Pros:
		- Built-in method, optimized by browsers for performance.
		- Faster execution time compared to custom implementation.
	+ Cons:
		- Less flexible than custom implementation, with limited support for complex selectors.

**Library:**

The `querySelectorDeep` function is a custom implementation, not a library. However, it's built on top of the browser's query selector engine, which provides a similar functionality to the `document.querySelectorAll` method.

**Special JS Feature or Syntax:**

This benchmark doesn't use any special JavaScript features or syntax that are unique to modern browsers or ECMAScript standards. The test cases only involve standard JavaScript methods and functions.

**Other Alternatives:**

If you need to implement a custom query selector function, you could consider using libraries like:

* `querySelector` from the `jsdom` library (a popular implementation of the DOM in Node.js)
* `selector` from the `fast-xml-parser` library (optimized for XML parsing)

However, keep in mind that these libraries might not provide the exact same functionality as `document.querySelectorAll`, and you should consider their performance implications before using them.

**Benchmark Preparation Code:**

The provided HTML preparation code creates a webpage with 10,000 custom elements (`my-button`) and appends them to the body of the document. The script then prepares both custom and normal elements using the `addCustomElements` and `addNormalElements` functions, respectively.

Related benchmarks:

Custom Selector vs Document Selector - 2 (version: 0)

Comparing performance of: Custom QS vs Document QS

Created: 6 years ago by: Guest

Jump to the latest result

Custom QS

Document QS

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