Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
Run results for:
shadow root test
Go to the benchmark
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=601860" width="100%" height="500px"></iframe>
Run details:
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36
Browser:
Chrome 134
Operating system:
Windows
Device Platform:
Desktop
Date tested:
one year ago
Benchmark engine:
Benchmark.js
results closure
179K/s
flatMap
157K/s
View exact numbers
Test name
Executions per second
✓
results closure
178,703 Ops/sec
flatMap
156,506 Ops/sec
Script Preparation code:
for (let i = 1; i < 300; i++) { const wrapper = document.createElement('div'); const shadowRoot = wrapper.attachShadow({ mode: 'open' }); shadowRoot.innerHTML = ` <div> <form id="login"> <input type="text" id="field1"><br> <input type="password" id="field2"><br> <input type="submit" id="field3" value="Submit"> </form> </div> `; }
Tests:
flatMap
function getShadowRoot(el) { if (!(el instanceof HTMLElement)) { return undefined; } if (window.chrome?.dom?.openOrClosedShadowRoot) { return window.chrome.dom.openOrClosedShadowRoot(el) ?? undefined; } if (el.openOrClosedShadowRoot) { return el.openOrClosedShadowRoot; } return el.shadowRoot ?? undefined; } function querySelectorAllWithShadowRoots( selector, rootNode = document ) { // this is always in document order according to querySelectorAll specification const allEls = Array.from(rootNode.querySelectorAll('*')); const selectedEls = new Set(rootNode.querySelectorAll(selector)); // Map across all els, and insert els from shadow root at the correct location to retain document // order. return allEls.flatMap((el) => { const result = []; if (selectedEls.has(el)) { result.push(el); } const shadowRoot = getShadowRoot(el); if (shadowRoot) { result.push(...querySelectorAllWithShadowRoots(selector, shadowRoot)); } return result; }); } querySelectorAllWithShadowRoots('input');
results closure
function getShadowRoot(el) { if (!(el instanceof HTMLElement)) { return undefined; } if (window.chrome?.dom?.openOrClosedShadowRoot) { return window.chrome.dom.openOrClosedShadowRoot(el) ?? undefined; } if (el.openOrClosedShadowRoot) { return el.openOrClosedShadowRoot; } return el.shadowRoot ?? undefined; } function querySelectorAllWithShadowRoots( selector, rootNode = document ) { const result = []; const findInRoot = (rootNode) => { // this is always in document order according to querySelectorAll specification const allEls = Array.from(rootNode.querySelectorAll('*')); const selectedEls = new Set(rootNode.querySelectorAll(selector)); for (const el of allEls) { if (selectedEls.has(el)) { result.push(el); } const shadowRoot = getShadowRoot(el); if (shadowRoot) { findInRoot(shadowRoot); } } }; findInRoot(rootNode); return result; } querySelectorAllWithShadowRoots('input');