Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
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
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>
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:
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
Embed
Embed Benchmark Result
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):
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
customElements using Template cloneNode vs. innerHTML
Declarative shadow dom
Web Component append content 4 ways
Comments
Confirm delete:
Do you really want to delete benchmark?