Run results for: TEMPLATE1

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.54 Safari/537.36

Browser: Chrome 95

Operating system: Windows

Device Platform: Desktop

Date tested: 3 years ago

Test name	Executions per second
T1 - set innerHTML	67870.4 Ops/sec
T2 - clone template - appendChild	107343.9 Ops/sec
T3 - clone Template - append	18.3 Ops/sec
T4 - clone HTML Template	18.6 Ops/sec

HTML Preparation code:

<template></template>
<div id="T1"></div>
<div id="T2"></div>
<div id="T3"></div>
<div id="T4"></div>
<div id="T5"></div>

Script Preparation code:

// Needs var hoisting, can't use let or const declarations!
var htmlTemplate = document.querySelector("template");
var myHTML = `<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>`;
htmlTemplate.innerHTML = myHTML;
var globalTemplate = document.createElement("template");
globalTemplate.innerHTML = myHTML;
var clonedTemplate = globalTemplate.content.cloneNode(true);

Tests:

T1 - set innerHTML
document.querySelector("#T1").innerHTML = myHTML;
T2 - clone template - appendChild
document.querySelector("#T2").appendChild(globalTemplate.content.cloneNode(true));
T3 - clone Template - append
document.querySelector("#T3").append(globalTemplate.content.cloneNode(true));
T4 - clone HTML Template
document.querySelector("#T4").append(htmlTemplate.content.cloneNode(true));

Calculation performance cloneNode versus innerHTML, mostly related to performance for use in Web Components

T1 - set innerHTML

T2 - clone template - appendChild

T3 - clone Template - append

T4 - clone HTML Template