Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
Declarative shadow dom
(version: 0)
Benchmark.js
Comparing performance of:
DOMParser code vs AttachShadow
Created:
3 years ago
by:
Guest
Go to the latest result
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>
Run tests (2)
Previous results
Fork
Test case name
Result
DOMParser code
AttachShadow
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years 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
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=487242" width="100%" height="500px"></iframe>
AttachShadow
169K/s
DOMParser code
9K/s
View exact numbers
Test name
Executions per second
✓
AttachShadow
169,468 Ops/sec
DOMParser code
9,152 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
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
shadow DOM vs light DOM
WebComponent rendering
shadow DOM vs light DOM 2
Comments
Confirm delete:
Do you really want to delete benchmark?