Benchmark: TEMPLATE1 - MeasureThat.net

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));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
T1 - set innerHTML
T2 - clone template - appendChild
T3 - clone Template - append
T4 - clone HTML Template

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Chrome 96 on Windows

View result in a separate tab

Test name	Executions per second
T1 - set innerHTML	43822.3 Ops/sec
T2 - clone template - appendChild	52595.3 Ops/sec
T3 - clone Template - append	26.5 Ops/sec
T4 - clone HTML Template	27.1 Ops/sec

TEMPLATE1 (version: 2)

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

Comparing performance of: T1 - set innerHTML vs T2 - clone template - appendChild vs T3 - clone Template - append vs T4 - clone HTML Template

Created: 2 years ago by: Registered User

Jump to the latest result

T1 - set innerHTML

T2 - clone template - appendChild

T3 - clone Template - append

T4 - clone HTML Template

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A