Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
shadow DOM vs light DOM
(version: 2)
Comparing performance of:
light DOM vs shadow DOM
Created:
5 years ago
by:
Registered User
Jump to the latest result
HTML Preparation code:
<template id="tpl"> <div> <h3>title example</h3> <p>example para with an <a href="#"><b>example link</b></a></p> </div> </template> <div id="container"></div>
Script Preparation code:
const tplNode = document.getElementById('tpl').content; const container = document.getElementById('tpl'); class MyEl extends HTMLElement { connectedCallback() { this.appendChild(tplNode.cloneNode(true)) } } customElements.define("my-el-lgt", MyEl); class MyElWithShadowDOM extends HTMLElement { connectedCallback() { this.attachShadow({mode: 'open'}); this.shadowRoot.appendChild(tplNode.cloneNode(true)) } } customElements.define("my-el-shd", MyElWithShadowDOM);
Tests:
light DOM
container.innerHTML = ` <my-el-lgt></my-el-lgt> `
shadow DOM
container.innerHTML = ` <my-el-shd></my-el-shd> `
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
light DOM
shadow DOM
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
3 months ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.6 Safari/605.1.15
Browser/OS:
Safari 18 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
Test name
Executions per second
light DOM
1125883.2 Ops/sec
shadow DOM
1129487.4 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**Benchmark Overview** The provided benchmark is designed to compare the performance of two approaches for rendering HTML content in JavaScript: Light DOM and Shadow DOM. **Light DOM vs Shadow DOM** In traditional Light DOM, the browser creates a temporary shadow root for each element, which can lead to slower performance compared to Shadow DOM. Shadow DOM allows for the creation of a dedicated document fragment that is attached to an element's DOM tree, providing better performance and isolation. **Options Compared** Two options are being compared: 1. **Light DOM**: The traditional approach of rendering HTML content directly in the main DOM. 2. **Shadow DOM**: The newer approach of using a shadow root to render HTML content, which provides better performance and isolation. **Pros and Cons** * **Light DOM:** + Pros: - Simpler implementation + Cons: - May lead to slower performance due to temporary shadow roots creation - Less isolated from the main DOM * **Shadow DOM:** + Pros: - Provides better performance and isolation - Easier maintenance and debugging + Cons: - More complex implementation **Library and Its Purpose** The `customElements` library is used in this benchmark. Custom Elements allow developers to define new HTML elements that can be used within web pages, providing a way to create custom UI components. In this benchmark, the `MyEl` class extends `HTMLElement` and defines two variants: `MyElWithShadowDOM`, which uses Shadow DOM, and `my-el-lgt`, which uses Light DOM. The `customElements.define()` function is used to register these new elements with the browser. **Special JS Feature or Syntax** The benchmark uses a feature called "template literals" (backticks `` ` ``) to create HTML content strings. Template literals allow developers to embed expressions inside string literals, making it easier to generate dynamic content. **Other Alternatives** If Shadow DOM is not available in older browsers, alternative approaches such as: * **Virtual DOM**: A virtual representation of the DOM tree, which can be updated and rendered on the client-side. * **Server-side rendering**: Rendering HTML content on the server-side before sending it to the client, reducing the amount of work needed to render the page. These alternatives may provide better performance or isolation but come with their own set of challenges and trade-offs.
Related benchmarks:
customElements using Template cloneNode vs. innerHTML
Declarative shadow dom
shadow DOM vs light DOM 2
Web Component append content 4 ways
Comments
Confirm delete:
Do you really want to delete benchmark?