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: 4 months 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

Test name	Executions per second
Simple - Template	735748.1 Ops/sec
Simple - JavaScript	643094.9 Ops/sec
Simple - innerHTML	630207.8 Ops/sec
Complex - Template	195863.6 Ops/sec
Complex - JavaScript	112561.8 Ops/sec
Complex - innerHTML	166828.5 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months 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.

Related benchmarks:

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: 3 years ago by: Guest

Jump to the latest result

Simple - Template

Simple - JavaScript

Simple - innerHTML

Complex - Template

Complex - JavaScript

Complex - innerHTML

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):