Run results for: customElements using Template cloneNode vs. innerHTML

Run details:

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

Browser: Firefox 132

Operating system: Ubuntu

Device Platform: Desktop

Date tested: one year ago

Benchmark engine: Benchmark.js

JavaScript Template

86K/s

only innerHTML

78K/s

DOM Template, repeated getElementById

67K/s

DOM Template, single getElementById

21K/s

View exact numbers

Test name	Executions per second
✓ JavaScript Template	85,865 Ops/sec
only innerHTML	77,898 Ops/sec
DOM Template, repeated getElementById	67,203 Ops/sec
DOM Template, single getElementById	20,676 Ops/sec

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