Benchmark: shadow DOM vs light DOM

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>

Previous results

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

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):

LLMs can make mistakes. Check important info.

**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:

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

light DOM

shadow DOM

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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