Benchmark: customElements using Template cloneNode vs. innerHTML

HTML Preparation code:

<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)
                );
        }
    }
);

Tests:

JavaScript Template
let el = document.createElement("performance-template"); document.body.append(el);
only innerHTML
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);
DOM Template, single getElementById
let el = document.createElement("performance-dom-template"); document.body.append(el);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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 6 months ago):

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

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.

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 6 months ago):