Benchmark: Different ways (template, 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 = simpleTemplate.content.cloneNode(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

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The benchmark measures the performance of creating DOM nodes using three different approaches: template literals, vanilla JavaScript, and innerHTML.

**Template Literals**

Template literals are a feature introduced in ECMAScript 2015 (ES6) that allows you to embed expressions inside string literals. In this benchmark, template literals are used to create complex HTML structures by wrapping the HTML content in backticks (`) followed by the expression.

The pros of using template literals for DOM node creation:

*   **Concise syntax**: Template literals provide a more readable and concise way to create HTML structures.
*   **Efficient parsing**: The browser's parser can efficiently parse and interpret template literals, making them suitable for performance-critical applications.

However, there are some potential downsides:

*   **Limited support**: Older browsers may not support template literals or have limited support for their features.
*   **Additional complexity**: Template literals require an understanding of the backtick syntax and expression evaluation, which can add complexity to the code.

**Vanilla JavaScript**

The vanilla JavaScript approach involves using native DOM methods like `createElement()`, `innerHTML`, and `appendChild()` to create HTML nodes.

The pros of using vanilla JavaScript for DOM node creation:

*   **Wide support**: Vanilla JavaScript is supported by all modern browsers, making it a reliable choice.
*   **Flexibility**: Vanilla JavaScript provides fine-grained control over the DOM node creation process.

However, there are some potential downsides:

*   **Verbose syntax**: The vanila JavaScript approach can result in more verbose code, especially for complex HTML structures.
*   **Performance overhead**: Using native DOM methods can introduce performance overhead due to the overhead of method calls and property access.

**innerHTML**

The innerHTML approach involves setting the `innerHTML` property of an element to create a new HTML node. This can be done using template literals or vanilla JavaScript.

The pros of using innerHTML for DOM node creation:

*   **Concise syntax**: InnerHTML allows you to set the content of an element in a single statement, making it concise and readable.
*   **Wide support**: InnerHTML is supported by all modern browsers, making it a reliable choice.

However, there are some potential downsides:

*   **Security risks**: Using innerHTML can introduce security risks if the input data is not properly sanitized, as it allows for arbitrary HTML injection.
*   **Performance overhead**: Setting the `innerHTML` property can result in performance overhead due to the overhead of string concatenation and property access.

**Benchmark Results**

The benchmark results show that template literals outperform vanilla JavaScript for simple DOM node creation. However, for complex HTML structures, the difference in performance is less significant. InnerHTML seems to offer a balanced trade-off between conciseness and performance.

Keep in mind that these results may vary depending on the specific use case, browser version, and platform.

Latest run results:

Run details: (Test run date: 19 minutes ago)

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

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
Simple - Template	796464.1 Ops/sec
Simple - JavaScript	742709.3 Ops/sec
Simple - innerHTML	570846.4 Ops/sec
Complex - Template	250975.0 Ops/sec
Complex - JavaScript	119437.1 Ops/sec
Complex - innerHTML	235267.9 Ops/sec

Related benchmarks:

Different ways (template, 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: 5 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 one month ago):