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> `

Historical Performance Data aggregated from 33 community runs

Desktop Results:

Chrome 17 runs

light DOM

119K/s

shadow DOM

112K/s

View exact numbers

✓ light DOM: 119,390 ops/sec
• shadow DOM: 112,264 ops/sec

Firefox 11 runs

shadow DOM

331K/s

light DOM

323K/s

View exact numbers

✓ shadow DOM: 331,224 ops/sec
• light DOM: 322,992 ops/sec

Mobile Results:

Chrome 5 runs

shadow DOM

82K/s

light DOM

81K/s

View exact numbers

✓ shadow DOM: 82,276 ops/sec
• light DOM: 80,870 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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 (X11; Linux x86_64; rv:149.0) Gecko/20100101 Firefox/149.0

Browser/OS: Firefox 149 on Linux

View result in a separate tab

light DOM

356K/s

shadow DOM

354K/s

View exact numbers

Test name	Executions per second
✓ light DOM	355,537 Ops/sec
shadow DOM	354,194 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.

shadow DOM vs light DOM (version: 2) Benchmark.js

Comparing performance of: `light DOM vs shadow DOM`

Created: 6 years ago by: Registered User

Go to the latest result

light DOM

shadow DOM

Historical Performance Data aggregated from 33 community runs

Desktop Results:

Chrome 17 runs

Firefox 11 runs

Mobile Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

shadow DOM vs light DOM (version: 2) Benchmark.js

Comparing performance of: light DOM vs shadow DOM

Created: 6 years ago by: Registered User

Go to the latest result

light DOM

shadow DOM

Historical Performance Data aggregated from 33 community runs

Desktop Results:

Chrome 17 runs

Firefox 11 runs

Mobile Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `light DOM vs shadow DOM`