Run results for: customElements using Template cloneNode vs. innerHTML

Run details:

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

Browser: Firefox 121

Operating system: Ubuntu

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
JavaScript Template	191066.6 Ops/sec
only innerHTML	180624.2 Ops/sec
DOM Template, repeated getElementById	145914.5 Ops/sec
DOM Template, single getElementById	55733.6 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);

Run results for: customElements using Template cloneNode vs. innerHTML

JavaScript Template

only innerHTML

DOM Template, repeated getElementById

DOM Template, single getElementById