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

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 4 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36

Browser/OS: Chrome 78 on Mac OS X 10.14.4

View result in a separate tab

Test name	Executions per second
Custom QS	3.4 Ops/sec
Document QS	1329.9 Ops/sec

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

Comparing performance of: Custom QS vs Document QS

Created: 4 years ago by: Guest

Jump to the latest result

Custom QS

Document QS

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A