Benchmark: Creating elements with cloneNode (template vs. normal element)

Script Preparation code:

var simpleTemplate = document.createElement("template");
simpleTemplate.innerHTML = `<span class="simple"></span>`;
  
var complexTemplate = document.createElement("template");
complexTemplate.innerHTML =
  `<span class="complex">
     <span class="simple-1"></span>
     <span class="simple-2">
       <span class="simple-2-1"></span>
     </span>
     <span class="simple-3">
       <span class="simple-3-1"></span>
     </span>
     <span class="simple-4"></span>
   </span>`;

var simpleElement = document.createElement("span");
simpleElement.classList.add("simple");
  
var complexElement = document.createElement("span");
complexElement.classList.add("complex");
complexElement.innerHTML =
  `<span class="simple-1"></span>
   <span class="simple-2">
     <span class="simple-2-1"></span>
   </span>
   <span class="simple-3">
     <span class="simple-3-1"></span>
   </span>
   <span class="simple-4"></span>`;

Tests:

Simple - Template
let el = document.createElement("div"); let content = simpleTemplate.content.cloneNode(true); el.appendChild(content);
Simple - JavaScript
let el = document.createElement("div"); let content = simpleElement.cloneNode(true); el.appendChild(content);
Complex - Template
let el = document.createElement("div"); let content = complexTemplate.content.cloneNode(true); el.appendChild(content);
Complex - JavaScript
let el = document.createElement("div"); let content = complexElement.cloneNode(true); el.appendChild(content);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Simple - Template
Simple - JavaScript
Complex - Template
Complex - JavaScript

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested, compared, and their pros and cons.

**Benchmark Overview**

The benchmark measures the performance of two approaches to create elements: using HTML templates (`template`) versus creating elements directly in JavaScript (`normal element`).

There are four individual test cases:

1. **Simple - Template**: Creates a `div` element from an HTML template.
2. **Simple - JavaScript**: Creates a `div` element by cloning a normal JavaScript element.
3. **Complex - Template**: Creates a more complex `div` element from an HTML template.
4. **Complex - JavaScript**: Creates a more complex `div` element by cloning a normal JavaScript element.

**Template Approach**

Using HTML templates allows for faster creation of elements, as it bypasses the DOM manipulation and serialization steps. This approach is particularly useful when creating complex structures with nested elements.

Pros:

* Faster execution times due to reduced DOM manipulation.
* Better performance when creating complex structures.

Cons:

* Requires additional setup (creating a `template` element) and parsing the HTML template string.
* Limited flexibility in modifying or updating the template content.

**JavaScript Approach**

Cloning a normal JavaScript element involves serializing its contents, which can lead to slower execution times compared to using templates.

Pros:

* More flexible than templates, as it allows for easy modification of the cloned element's content.
* No additional setup required, as existing elements can be cloned directly.

Cons:

* Slower execution times due to DOM manipulation and serialization.
* May not perform well when creating complex structures with nested elements.

**Other Considerations**

The benchmark also considers factors such as browser version (Chrome 126) and platform (Desktop), which may affect the performance results. Additionally, the test cases are executed at different frequencies per second (`ExecutionsPerSecond` values).

**Library/Functionality Overview**

In this benchmark, two libraries/functionalities are used:

1. `cloneNode(true)`: This method creates a deep clone of an element and its contents.
2. `innerHTML` and `classList.add()`: These properties allow for setting the inner HTML and adding classes to elements.

**Special JS Feature/Syntax**

There is no special JavaScript feature or syntax used in this benchmark, apart from using the `cloneNode(true)` method, which is a standard DOM API function.

**Alternatives**

If you're interested in exploring alternative approaches, consider:

1. **Document Fragment**: Creating document fragments can be another efficient way to create complex structures without relying on templates.
2. **Canvas or SVG**: Using canvas or SVG elements for rendering graphics can provide an alternative performance path compared to DOM manipulation.
3. **JavaScript libraries like React or Angular**: These frameworks provide their own optimized solutions for building and manipulating complex UI components, which may offer better performance than the benchmark's approaches.

Keep in mind that this benchmark is designed to measure specific performance aspects of creating elements using templates versus JavaScript cloning, so exploring alternative approaches might require adapting the benchmarking setup and scenarios.

Latest run results:

Run details: (Test run date: 4 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Browser/OS: Chrome 126 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Simple - Template	798955.7 Ops/sec
Simple - JavaScript	1146987.2 Ops/sec
Complex - Template	293804.6 Ops/sec
Complex - JavaScript	353777.8 Ops/sec

Related benchmarks:

Creating elements with cloneNode (template vs. normal element) (version: 0)

Comparing performance of: Simple - Template vs Simple - JavaScript vs Complex - Template vs Complex - JavaScript

Created: 3 years ago by: Guest

Jump to the latest result

Simple - Template

Simple - JavaScript

Complex - Template

Complex - JavaScript

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):