Benchmark: shadow root test

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');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
flatMap
results closure

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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/OS: Chrome 134 on Windows

View result in a separate tab

Test name	Executions per second
flatMap	156506.3 Ops/sec
results closure	178703.4 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the provided JSON and explain what's being tested, compared options, pros and cons of each approach, library usage, special JavaScript features or syntax, and other considerations.

**Benchmark Definition**

The benchmark is called "shadow root test" and it involves creating a shadow DOM element with an HTML form inside. The script preparation code creates a wrapper element, attaches a shadow root to it, and sets the inner HTML of the shadow root. The purpose of this benchmark seems to be measuring the performance of querying elements within the shadow root.

**Options Compared**

There are two test cases:

1. "flatMap"
2. "results closure"

Both test cases use the `querySelectorAllWithShadowRoots` function, which traverses the DOM tree and returns all elements that match a given selector, including those in shadow roots.

**"flatMap" Option**

The "flatMap" option uses the `Array.prototype.flatMap()` method to flatten the array of elements returned by `querySelectorAllWithShadowRoots`. This approach is efficient because it avoids creating an intermediate array and directly returns the flattened array.

Pros:

* Efficient use of memory
* Fast execution

Cons:

* Creates a new array, which may consume additional memory
* May not be suitable for very large inputs due to potential performance overhead

**"results closure" Option**

The "results closure" option uses a recursive function `findInRoot` to traverse the DOM tree and return all elements that match a given selector. This approach is more traditional and may be easier to understand, but it's also less efficient.

Pros:

* Easy to understand
* No memory overhead

Cons:

* Creates an intermediate array, which consumes memory
* May perform slower due to recursion and array creation

**Library Usage**

None of the provided test cases use any external libraries. However, they do rely on built-in JavaScript features like `Array.prototype.flatMap()` and `querySelectorAllWithShadowRoots`.

**Special JavaScript Features or Syntax**

The "flatMap" option uses the `Array.prototype.flatMap()` method, which is a modern JavaScript feature introduced in ECMAScript 2019.

Other Considerations

* Both test cases use the `document` object to access the DOM tree.
* The `querySelectorAllWithShadowRoots` function relies on the `getShadowRoot` function, which returns either an element's shadow root or undefined if it doesn't exist.
* The benchmark measures the execution time of each test case in seconds.

**Other Alternatives**

If you wanted to implement a different approach, you could consider using:

1. Iterating over the DOM tree manually: Instead of using `querySelectorAllWithShadowRoots`, you could write a custom function that iterates over the DOM tree and checks for matching elements.
2. Using a library like Lodash or Underscore.js: These libraries provide utility functions for working with arrays and DOM elements, which might simplify the implementation.
3. Implementing a shadow root traversal algorithm: You could implement your own algorithm to traverse the shadow roots, potentially using more efficient data structures or caching.

Keep in mind that these alternatives would likely have different performance characteristics and might not be suitable for all use cases.

Related benchmarks:

shadow root test (version: 0)

Comparing performance of: flatMap vs results closure

Created: one year ago by: Registered User

Jump to the latest result

flatMap

results closure

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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