Benchmark: Declarative shadow dom

HTML Preparation code:

<div id="container"></div>

Tests:

DOMParser code
const prerendered = ` <div> <template shadowroot="open"> <p> Dynamically loaded shadow dom </p> <p> Dynamically loaded shadow dom </p> </template> </div> `; const elem = new DOMParser().parseFromString(prerendered, 'text/html', { includeShadowRoots: true}); document.getElementById('container').appendChild(...elem.body.children)
AttachShadow
const container = document.getElementById('container'); const elem = document.createElement('div'); const shadow = elem.attachShadow({mode: 'open'}); shadow.textContent = ` <p> Dynamically loaded shadow dom </p> <p> Dynamically loaded shadow dom </p> `; container.appendChild(elem);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
DOMParser code
AttachShadow

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/112.0

Browser/OS: Firefox 112 on Linux

View result in a separate tab

Test name	Executions per second
DOMParser code	9151.8 Ops/sec
AttachShadow	169468.3 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Overview**

The benchmark measures the performance of two different approaches to create and manipulate shadow DOM in modern web browsers, specifically Firefox 112.

**Approaches Compared**

There are two test cases:

1. **DOMParser code**: This approach uses the `DOMParser` API to parse a string representation of an HTML document with a shadow root, allowing you to access its content.
2. **AttachShadow**: This approach creates a new element and attaches a shadow DOM to it using the `attachShadow()` method.

**Pros and Cons**

1. **DOMParser code**:
	* Pros:
		+ Easier to implement, as it uses existing APIs
		+ Can be more efficient in terms of memory usage
	* Cons:
		+ May require additional DOM parsing steps
		+ May not work for all use cases (e.g., complex shadow roots)
2. **AttachShadow**:
	* Pros:
		+ More flexible, as it allows you to create a custom shadow root structure
		+ Can be more efficient in terms of execution time
	* Cons:
		+ Requires more manual memory management (by creating and appending elements)
		+ May have performance overhead due to the creation and manipulation of DOM elements

**Libraries and Features**

There are no libraries explicitly mentioned in the benchmark definition. However, `DOMParser` is a built-in API, and it's essential for working with HTML documents and shadow roots.

No special JavaScript features or syntax are used in these test cases.

**Alternatives**

Other approaches to create and manipulate shadow DOM include:

1. **ShadowRoot**: This is an upcoming feature in the ECMAScript standard (currently implemented in Chrome and Firefox) that allows you to create a custom shadow root structure using a `shadowroot` attribute.
2. **template literals**: Some modern JavaScript engines, like V8 in Chrome, use template literals to parse HTML documents with shadow roots, which can be more efficient than DOMParser.
3. **Custom elements**: Creating custom elements using the Web Components API can also provide a way to create shadow roots.

**Benchmark Interpretation**

The benchmark results show that the `AttachShadow` approach is slightly faster (average execution per second: 11,514) compared to the `DOMParser code` approach (average execution per second: 9,151). However, it's essential to note that these results are specific to Firefox 112 on a Linux desktop platform and may not generalize to other browsers or platforms.

Keep in mind that this benchmark is intended to measure performance rather than provide an exhaustive comparison of the two approaches. The choice between `DOMParser code` and `AttachShadow` ultimately depends on your specific use case, personal preference, and performance requirements.

Related benchmarks:

Declarative shadow dom (version: 0)

Comparing performance of: DOMParser code vs AttachShadow

Created: 2 years ago by: Guest

Jump to the latest result

DOMParser code

AttachShadow

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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