MeasureThat.net

Run results for: customElements using Template cloneNode vs. innerHTML

Go to the benchmark
Run details:
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:136.0) Gecko/20100101 Firefox/136.0
Firefox 136
Windows
Desktop
one month ago
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
HTML Preparation code:
AخA
 
1
<template id="PERFORMANCE-DOM-TEMPLATE">
2
  <span class="simple"></span>
3
</template>
Script Preparation code:
​x
 
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);