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

Historical Performance Data aggregated from 45 community runs

Desktop Results:

Chrome 32 runs

Simple - Template

860K/s

Simple - JavaScript

770K/s

Simple - innerHTML

711K/s

Complex - Template

233K/s

Complex - innerHTML

231K/s

Complex - JavaScript

119K/s

Fastest: Simple - Template (7.2x faster)

View exact numbers

✓ Simple - Template: 860,001 ops/sec
• Simple - JavaScript: 770,398 ops/sec
• Simple - innerHTML: 711,133 ops/sec
• Complex - Template: 233,212 ops/sec
• Complex - innerHTML: 230,666 ops/sec
• Complex - JavaScript: 118,700 ops/sec

Firefox 8 runs

Simple - Template

617K/s

Simple - innerHTML

580K/s

Simple - JavaScript

566K/s

Complex - Template

205K/s

Complex - innerHTML

177K/s

Complex - JavaScript

102K/s

Fastest: Simple - Template (6.0x faster)

View exact numbers

✓ Simple - Template: 616,896 ops/sec
• Simple - innerHTML: 580,225 ops/sec
• Simple - JavaScript: 565,961 ops/sec
• Complex - Template: 204,621 ops/sec
• Complex - innerHTML: 176,564 ops/sec
• Complex - JavaScript: 102,373 ops/sec

Mobile Results:

Chrome 5 runs

Simple - innerHTML

84K/s

Simple - JavaScript

76K/s

Simple - Template

67K/s

Complex - innerHTML

39K/s

Complex - Template

35K/s

Complex - JavaScript

13K/s

Fastest: Simple - innerHTML (6.3x faster)

View exact numbers

✓ Simple - innerHTML: 83,683 ops/sec
• Simple - JavaScript: 75,830 ops/sec
• Simple - Template: 67,256 ops/sec
• Complex - innerHTML: 38,646 ops/sec
• Complex - Template: 34,760 ops/sec
• Complex - JavaScript: 13,295 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: 8 months ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 143 on Android

View result in a separate tab

Simple - Template

416K/s

Simple - JavaScript

354K/s

Simple - innerHTML

311K/s

Complex - Template

145K/s

Complex - innerHTML

137K/s

Complex - JavaScript

60K/s

View exact numbers

Test name	Executions per second
✓ Simple - Template	416,052 Ops/sec
Simple - JavaScript	353,688 Ops/sec
Simple - innerHTML	311,244 Ops/sec
Complex - Template	144,882 Ops/sec
Complex - innerHTML	137,070 Ops/sec
Complex - JavaScript	59,895 Ops/sec

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

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

Go to the latest result

Simple - Template

Simple - JavaScript

Simple - innerHTML

Complex - Template

Complex - JavaScript

Complex - innerHTML

Historical Performance Data aggregated from 45 community runs

Desktop Results:

Chrome 32 runs

Firefox 8 runs

Mobile Results:

Chrome 5 runs

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

Go to the latest result

Simple - Template

Simple - JavaScript

Simple - innerHTML

Complex - Template

Complex - JavaScript

Complex - innerHTML

Historical Performance Data aggregated from 45 community runs

Desktop Results:

Chrome 32 runs

Firefox 8 runs

Mobile Results:

Chrome 5 runs

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`