Benchmark: Different ways (template importNode, vanilla js, innerHTML) to create DOM node

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

Tests:

Simple - Template
let el = document.createElement("div"); let content = document.importNode(simpleTemplate,true); el.appendChild(content);
Simple - JavaScript
let el = document.createElement("div"); let content = document.createElement("span") content.classList.add("simple"); el.appendChild(content);
Simple - innerHTML
let el = document.createElement("div"); el.innerHTML = ``;
Complex - Template
let el = document.createElement("div"); let content = complexTemplate.content.cloneNode(true); el.appendChild(content);
Complex - JavaScript
let el = document.createElement("span"); el.classList.add("complex"); let span1 = document.createElement("span"); span1.classList.add("simple-1"); let span2 = document.createElement("span"); span2.classList.add("simple-2"); let span21 = document.createElement("span"); span21.classList.add("simple-2-1"); span2.appendChild(span21); let span3 = document.createElement("span"); span3.classList.add("simple-3"); let span31 = document.createElement("span"); span31.classList.add("simple-31"); span3.appendChild(span31); let span4 = document.createElement("span"); span4.classList.add("simple-4"); el.append(span1, span2, span3, span4);
Complex - innerHTML
let el = document.createElement("div"); el.innerHTML = ` `;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:133.0) Gecko/20100101 Firefox/133.0

Browser/OS: Firefox 133 on Linux

View result in a separate tab

Simple - Template

736K/s

Simple - JavaScript

643K/s

Simple - innerHTML

630K/s

Complex - Template

196K/s

Complex - innerHTML

167K/s

Complex - JavaScript

113K/s

View exact numbers

Test name	Executions per second
✓ Simple - Template	735,748 Ops/sec
Simple - JavaScript	643,095 Ops/sec
Simple - innerHTML	630,208 Ops/sec
Complex - Template	195,864 Ops/sec
Complex - innerHTML	166,828 Ops/sec
Complex - JavaScript	112,562 Ops/sec

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

LLMs can make mistakes. Check important info.

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

**Benchmark Overview**

The benchmark measures the performance of creating DOM nodes using three different approaches:

1. Using a `template` element with `innerHTML`
2. Using JavaScript to create elements directly
3. Using `innerHTML` to set the content of an existing element

Each approach is compared in two variations: simple and complex. The test cases are designed to simulate real-world scenarios, where simplicity might be preferred over complexity.

**Approaches Compared**

1. **Template Element with `innerHTML`:**
	* This approach involves creating a `template` element, setting its `innerHTML`, and then importing the content into an existing element using `document.importNode`.
	* The template element is used to pre-process the HTML and then import it as a fragment.
2. **JavaScript Creation:**
	* This approach involves creating elements directly using JavaScript's DOM API (e.g., `document.createElement`).
3. **`innerHTML`:**
	* This approach involves setting the content of an existing element using `innerHTML`.

**Pros and Cons**

1. **Template Element with `innerHTML`:**
	* Pros:
		+ Can be more efficient for complex HTML structures, as it allows for server-side rendering and caching.
		+ Reduces DOM manipulation overhead.
	* Cons:
		+ May have performance issues due to the need to create a new template element and import its content.
2. **JavaScript Creation:**
	* Pros:
		+ Provides direct control over element creation and attributes.
		+ Can be more flexible for dynamic scenarios.
	* Cons:
		+ Can lead to increased DOM manipulation overhead, especially for complex structures.
3. **`innerHTML`:**
	* Pros:
		+ Simplifies code and reduces DOM manipulation overhead.
		+ Works well for simple HTML content.
	* Cons:
		+ May be less efficient for complex HTML structures due to the need to parse and modify the content.

**Other Considerations**

1. **Libraries:** Some test cases use libraries like jQuery, which provides its own implementation of `innerHTML` and DOM manipulation methods. Understanding the library's purpose and how it affects performance is essential.
2. **Browser Consistency:** The benchmark should be run in multiple browsers to ensure consistent results across different platforms.

In conclusion, this benchmark provides a comprehensive comparison of three approaches for creating DOM nodes, highlighting their pros and cons. By understanding these factors, developers can make informed decisions about the best approach for their specific use cases.

Different ways (template importNode, vanilla js, innerHTML) to create DOM node (version: 0)

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

Created: 4 years ago by: Guest

Go to the latest result

Simple - Template

Simple - JavaScript

Simple - innerHTML

Complex - Template

Complex - JavaScript

Complex - innerHTML

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Different ways (template importNode, vanilla js, innerHTML) to create DOM node (version: 0)

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

Created: 4 years ago by: Guest

Go to the latest result

Simple - Template

Simple - JavaScript

Simple - innerHTML

Complex - Template

Complex - JavaScript

Complex - innerHTML

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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