Benchmark: shadow DOM vs light DOM 2

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'}).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: 10 months ago)

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

Browser/OS: Firefox 128 on Linux

View result in a separate tab

Test name	Executions per second
light DOM	372301.8 Ops/sec
shadow DOM	367595.1 Ops/sec

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

LLMs can make mistakes. Check important info.

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

**Benchmark Overview**

The provided benchmark is designed to compare two approaches: using Light DOM (also known as the traditional DOM) and Shadow DOM in creating and rendering HTML elements. The test cases measure the performance difference between these two approaches, specifically focusing on cloning and appending a template node to an element's innerHTML.

**Light DOM vs Shadow DOM**

Here's what's being tested:

1. **Light DOM**: In this approach, the `innerHTML` property is used to set the content of an element. This involves creating a new string with the HTML markup, which can be slower due to the overhead of parsing and manipulating strings.
2. **Shadow DOM**: Shadow DOM uses a separate document fragment to render its children. When the `connectedCallback` function is called on the custom element, it appends the cloned template node to the shadow root's content host, which is a different context from the main DOM. This approach avoids the overhead of parsing strings and can be faster.

**Options Compared**

The benchmark compares two options:

1. **Using Light DOM**: Sets the `innerHTML` property directly.
2. **Using Shadow DOM**: Creates a custom element with a shadow root and appends the cloned template node to it.

**Pros and Cons of Each Approach**

* **Light DOM**:
	+ Pros: Easier to implement, more widely supported.
	+ Cons: Can be slower due to string manipulation overhead.
* **Shadow DOM**:
	+ Pros: Faster performance, better suited for complex components.
	+ Cons: Requires additional setup and understanding of shadow roots.

**Library Used**

The benchmark uses the `customElements` API, which is a modern JavaScript standard for creating custom elements. The `customElements.define()` function creates a new custom element with its own namespace, allowing developers to create reusable UI components.

**Special JS Feature/Syntax**

The benchmark makes use of modern JavaScript features:

1. **Template literals**: Used in the HTML preparation code to define a template string.
2. **Class expressions**: Used to define classes (e.g., `MyEl extends HTMLElement`).
3. **Arrow functions**: Not used in this benchmark, but it's worth noting that they can be used instead of traditional function declarations.

**Other Alternatives**

If you're looking for alternative approaches or frameworks for comparing performance, consider the following:

1. **Benchmarking libraries**: Such as `benchpress`, `benchmarkjs`, or `fast-benchmark`.
2. **Web performance testing tools**: Like Google's Web Performance Test (WPT) or Microsoft's PWA (Progressive Web App) tests.

Keep in mind that these alternatives might have different focus areas, such as web page loading times, application startup times, or specific feature performance optimizations.

Related benchmarks:

shadow DOM vs light DOM 2 (version: 0)

Comparing performance of: light DOM vs shadow DOM

Created: 3 years ago by: Guest

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