MeasureThat.net

Run results for: TEMPLATE1

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

Go to the benchmark
Run details:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.54 Safari/537.36
Chrome 95
Windows
Desktop
3 years ago
Test name Executions per second
HTML Template 93833.7 Ops/sec
singleTemplate 75529.6 Ops/sec
innerHTML 71471.1 Ops/sec
Global template - append 94801.1 Ops/sec
Global template - appendChild 97058.0 Ops/sec
HTML Preparation code:
AخA
 
1
<template></template>
2
<div id="T1"></div>
3
<div id="T2"></div>
4
<div id="T3"></div>
5
<div id="T4"></div>
6
<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));