Benchmark: customElements using Template cloneNode vs. innerHTML

HTML Preparation code:

<template id="PERFORMANCE-DOM-TEMPLATE">
  <span class="simple"></span>
</template>

AخA
 
<template id="PERFORMANCE-DOM-TEMPLATE">
  <span class="simple"></span>
</template>

Script Preparation code:

let template = document.createElement("template");
template.innerHTML = `<span class="simple"></span>`;
let DOMTemplate = document.getElementById("PERFORMANCE-DOM-TEMPLATE");

customElements.define(
    "performance-template",
    class extends HTMLElement {
        constructor() {
            super()
                .attachShadow({
                    mode: "open",
                })
                .append(template.content.cloneNode(true));
        }
    }
);
customElements.define(
    "performance-innerhtml",
    class extends HTMLElement {
        constructor() {
            super().attachShadow({
                mode: "open",
            }).innerHTML = `<span class="simple"></span>`;
        }
    }
);
customElements.define(
    "performance-dom-template",
    class extends HTMLElement {
        constructor() {
            super()
                .attachShadow({
                    mode: "open",
                })
                .append(DOMtemplate.content.cloneNode(true));
        }
    }
);
customElements.define(
    "performance-dom-template-getelement",
    class extends HTMLElement {
        constructor() {
            super()
                .attachShadow({
                    mode: "open",
                })
                .append(
                    document.getElementById("PERFORMANCE-DOM-TEMPLATE").content.cloneNode(true)
                );
        }
    }
);

​x
 
let template = document.createElement("template");template.innerHTML = `<span class="simple"></span>`;let DOMTemplate = document.getElementById("PERFORMANCE-DOM-TEMPLATE");​customElements.define(    "performance-template",    class extends HTMLElement {        constructor() {            super()                .attachShadow({                    mode: "open",                })                .append(template.content.cloneNode(true));        }    });customElements.define(    "performance-innerhtml",    class extends HTMLElement {        constructor() {            super().attachShadow({                mode: "open",            }).innerHTML = `<span class="simple"></span>`;        }    });customElements.define(    "performance-dom-template",    class extends HTMLElement {        constructor() {            super()                .attachShadow({                    mode: "open",                })                .append(DOMtemplate.content.cloneNode(true));        }    });customElements.define(    "performance-dom-template-getelement",    class extends HTMLElement {        constructor() {            super()                .attachShadow({                    mode: "open",                })                .append(                    document.getElementById("PERFORMANCE-DOM-TEMPLATE").content.cloneNode(true)                );        }    });

Tests:

JavaScript Template
let el = document.createElement("performance-template"); document.body.append(el);
let el = document.createElement("performance-template");
document.body.append(el);
only innerHTML
let el = document.createElement("performance-innerhtml"); document.body.append(el);
let el = document.createElement("performance-innerhtml");
document.body.append(el);
DOM Template, repeated getElementById
let el = document.createElement("performance-dom-template-getelement"); document.body.append(el);
let el = document.createElement("performance-dom-template-getelement");
document.body.append(el);
DOM Template, single getElementById
let el = document.createElement("performance-dom-template"); document.body.append(el);
let el = document.createElement("performance-dom-template");
document.body.append(el);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
JavaScript Template
only innerHTML
DOM Template, repeated getElementById
DOM Template, single getElementById

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:136.0) Gecko/20100101 Firefox/136.0

Browser/OS: Firefox 136 on Windows

View result in a separate tab

Test name	Executions per second
JavaScript Template	181129.0 Ops/sec
only innerHTML	164380.6 Ops/sec
DOM Template, repeated getElementById	139473.8 Ops/sec
DOM Template, single getElementById	50658.8 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 5 months ago):

Overview of the Benchmark

The provided benchmark is designed to compare the performance of three different approaches for rendering HTML content in JavaScript microbenchmarks:

Template-based approach: This method uses a template element and clones its contents using cloneNode(true).
innerHTML-based approach: This method sets the innerHTML of an element directly.
Element-by-Element approach: This method creates separate elements for each cloning step.

Template-based approach

This approach is designed to demonstrate the efficiency of creating a template element once and reusing it multiple times, rather than creating a new element for each cloning operation.

Pros:

Reduces DOM mutations, which can be expensive operations.
Allows for better caching and reuse of resources.

Cons:

Requires an initial DOM mutation to create the template element.
May require additional memory allocation for the cloned elements.

innerHTML-based approach

This approach is simple and easy to implement, but it may have performance implications due to the overhead of setting innerHTML on an element.

Pros:

Easy to implement and understand.
Does not require any DOM mutations or cloning operations.

Cons:

Can be slower than other approaches due to the overhead of setting innerHTML.
May lead to increased memory allocation for the cloned elements.

Element-by-Element approach

This approach creates separate elements for each cloning operation, which can lead to increased DOM mutations and potential performance issues.

Pros:

Easy to implement and understand.
Does not require any template or caching optimizations.

Cons:

Can be slower than other approaches due to the overhead of creating multiple elements.
Leads to increased DOM mutations and potential performance issues.

Library usage

The benchmark uses the customElements API, which is a modern JavaScript API for defining custom HTML elements. The template element is used as part of this API.

Pros:

Provides a standardized way to create custom HTML elements with reusable templates.
Allows for more efficient and scalable rendering of complex UI components.

Cons:

May require additional browser support or polyfills for older browsers.
Can add complexity to the benchmark due to the need to handle custom element lifecycle events.

Special JS features

The benchmark does not explicitly use any special JavaScript features or syntax, such as ES6 modules, async/await, or Web Workers. However, it may benefit from additional optimizations that take these features into account.

Other alternatives

Alternative approaches for rendering HTML content in JavaScript microbenchmarks include:

Using a library like React or Angular to handle DOM updates and rendering.
Utilizing WebGL or Canvas API for 2D graphics rendering.
Leveraging Web Workers for parallel execution of computationally intensive tasks.

Keep in mind that these alternative approaches may require additional setup, resources, and expertise to implement effectively.

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided benchmark is designed to compare the performance of three different approaches for rendering HTML content in JavaScript microbenchmarks:

1. **Template-based approach**: This method uses a `template` element and clones its contents using `cloneNode(true)`.
2. **innerHTML-based approach**: This method sets the innerHTML of an element directly.
3. **Element-by-Element approach**: This method creates separate elements for each cloning step.

**Template-based approach**

This approach is designed to demonstrate the efficiency of creating a template element once and reusing it multiple times, rather than creating a new element for each cloning operation.

Pros:

* Reduces DOM mutations, which can be expensive operations.
* Allows for better caching and reuse of resources.

Cons:

* Requires an initial DOM mutation to create the template element.
* May require additional memory allocation for the cloned elements.

**innerHTML-based approach**

This approach is simple and easy to implement, but it may have performance implications due to the overhead of setting innerHTML on an element.

Pros:

* Easy to implement and understand.
* Does not require any DOM mutations or cloning operations.

Cons:

* Can be slower than other approaches due to the overhead of setting innerHTML.
* May lead to increased memory allocation for the cloned elements.

**Element-by-Element approach**

This approach creates separate elements for each cloning operation, which can lead to increased DOM mutations and potential performance issues.

Pros:

* Easy to implement and understand.
* Does not require any template or caching optimizations.

Cons:

* Can be slower than other approaches due to the overhead of creating multiple elements.
* Leads to increased DOM mutations and potential performance issues.

**Library usage**

The benchmark uses the `customElements` API, which is a modern JavaScript API for defining custom HTML elements. The `template` element is used as part of this API.

Pros:

* Provides a standardized way to create custom HTML elements with reusable templates.
* Allows for more efficient and scalable rendering of complex UI components.

Cons:

* May require additional browser support or polyfills for older browsers.
* Can add complexity to the benchmark due to the need to handle custom element lifecycle events.

**Special JS features**

**Other alternatives**

Alternative approaches for rendering HTML content in JavaScript microbenchmarks include:

* Using a library like React or Angular to handle DOM updates and rendering.
* Utilizing WebGL or Canvas API for 2D graphics rendering.
* Leveraging Web Workers for parallel execution of computationally intensive tasks.

Keep in mind that these alternative approaches may require additional setup, resources, and expertise to implement effectively.

Related benchmarks:

customElements using Template cloneNode vs. innerHTML (version: 1)

Comparing performance of: JavaScript Template vs only innerHTML vs DOM Template, repeated getElementById vs DOM Template, single getElementById

Created: 3 years ago by: Registered User

Jump to the latest result

JavaScript Template

only innerHTML

DOM Template, repeated getElementById

DOM Template, single getElementById

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 5 months ago):