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

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):

LLMs can make mistakes. Check important info.

Let's break down the provided JSON data to explain what is tested, compared options, and other considerations.

**Benchmark Definition**

The benchmark measures the performance of three different approaches when cloning and appending HTML content in Web Components using JavaScript:

1. `innerHTML`: Setting the innerHTML of a DOM element.
2. `appendChild` followed by `cloneNode(true)`: Appending the cloned content to a DOM element and then cloning the new child node.
3. `append` followed by `cloneNode(true)`: Directly appending the cloned content to a DOM element.

**Library and Syntax**

The benchmark uses the following library:

* None, as it only relies on standard JavaScript features and DOM APIs (e.g., `document.querySelector`, `innerHTML`, `appendChild`, etc.).

Some special JS features or syntax used in this benchmark include:

* The use of template literals (`myHTML = `<div></div><div></div>...`).
* The use of the `cloneNode(true)` method to clone templates.

**Pros and Cons**

Here are some pros and cons for each approach:

1. **innerHTML**:
	* Pros: Simple, easy to implement.
	* Cons: Can lead to performance issues if not done correctly (e.g., creating multiple DOM nodes).
2. **appendChild + cloneNode(true)**:
	* Pros: More efficient than `innerHTML`, as it avoids creating unnecessary DOM nodes.
	* Cons: Requires an extra step of appending and cloning, which can add overhead.
3. **append + cloneNode(true)**:
	* Pros: Similar to the previous approach but with a direct append method, reducing overhead.
	* Cons: Requires a slightly more complex implementation.

**Other Considerations**

When choosing between these approaches, consider the following factors:

* Performance: If you prioritize performance and are willing to invest in implementing the most efficient solution, `appendChild + cloneNode(true)` or `append + cloneNode(true)` might be better choices.
* Complexity: If simplicity is more important, `innerHTML` might be a better option, despite potential performance drawbacks.

**Alternatives**

If you're looking for alternative approaches or variations on these methods, consider:

* Using a library like React or Angular, which provide optimized DOM management and rendering mechanisms.
* Implementing custom solutions using Web Components' Shadow DOM APIs.
* Exploring other DOM manipulation techniques, such as `createElement` followed by `appendChild` and then cloning.

In conclusion, the benchmark provides a fair comparison of three different approaches to cloning and appending HTML content in Web Components. By understanding the pros and cons of each method, developers can make informed decisions about which approach best suits their needs, considering factors like performance, complexity, and personal preference.

Latest run results:

Run details: (Test run date: 3 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

Related benchmarks:

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: 3 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

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):