Run results for: customElements using Template cloneNode vs. innerHTML

Run details:

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

Browser: Firefox 129

Operating system: Windows

Device Platform: Desktop

Date tested: 2 years ago

Benchmark engine: Benchmark.js

JavaScript Template

246K/s

only innerHTML

159K/s

DOM Template, repeated getElementById

124K/s

DOM Template, single getElementById

59K/s

View exact numbers

Test name	Executions per second
✓ JavaScript Template	245,715 Ops/sec
only innerHTML	158,553 Ops/sec
DOM Template, repeated getElementById	123,933 Ops/sec
DOM Template, single getElementById	58,578 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);