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

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Firefox 7 runs

JavaScript Template

191K/s

only innerHTML

164K/s

DOM Template, repeated getElementById

124K/s

DOM Template, single getElementById

56K/s

Fastest: JavaScript Template (3.4x faster)

View exact numbers

✓ JavaScript Template: 191,067 ops/sec
• only innerHTML: 164,381 ops/sec
• DOM Template, repeated getElementById: 123,933 ops/sec
• DOM Template, single getElementById: 55,734 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
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 year ago)

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

Browser/OS: Firefox 141 on Windows

View result in a separate tab

JavaScript Template

314K/s

only innerHTML

286K/s

DOM Template, repeated getElementById

233K/s

DOM Template, single getElementById

95K/s

View exact numbers

Test name	Executions per second
✓ JavaScript Template	313,730 Ops/sec
only innerHTML	285,888 Ops/sec
DOM Template, repeated getElementById	233,430 Ops/sec
DOM Template, single getElementById	95,277 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.

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

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

Created: 5 years ago by: Registered User

Go to the latest result

JavaScript Template

only innerHTML

DOM Template, repeated getElementById

DOM Template, single getElementById

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Firefox 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

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

Created: 5 years ago by: Registered User

Go to the latest result

JavaScript Template

only innerHTML

DOM Template, repeated getElementById

DOM Template, single getElementById

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Firefox 7 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: `JavaScript Template vs only innerHTML vs DOM Template, repeated getElementById vs DOM Template, single getElementById`