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

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:

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
complex template
complex javascript
complex innerhtml

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark, hosted on MeasureThat.net, compares the performance of three different approaches to create DOM nodes:

1. Using `template` elements
2. Creating individual HTML elements using vanilla JavaScript
3. Setting the innerHTML property of an existing element (complex innerHTML)

**Options Compared**

* **Template Elements**: This approach uses the new `template` element introduced in ECMAScript 2015, which allows for efficient creation of complex DOM structures.
* **Vanilla JavaScript**: This approach creates individual HTML elements using the `document.createElement()` method and then appends them to a parent element.
* **Complex InnerHTML**: This approach sets the innerHTML property of an existing element with a complex structure, which is typically less efficient than creating new elements.

**Pros and Cons**

* **Template Elements**:
	+ Pros: Efficient creation of complex DOM structures, reduces unnecessary HTML parsing.
	+ Cons: May not be supported in older browsers (before ECMAScript 2015), requires additional JavaScript syntax.
* **Vanilla JavaScript**:
	+ Pros: Wide browser support, easy to implement and understand.
	+ Cons: Can result in slower performance due to the need for repeated DOM node creations and appends.
* **Complex InnerHTML**:
	+ Pros: Simple to implement, no need for additional JavaScript syntax or special elements.
	+ Cons: Less efficient than creating new elements, may lead to slower performance due to unnecessary HTML parsing.

**Library Usage**

The benchmark uses the `template` element, which is a built-in JavaScript feature introduced in ECMAScript 2015. This library has no external dependencies and only requires modern browsers that support the `template` element.

**Special JS Features or Syntax**

This benchmark uses the `template` element, which is a special JavaScript feature introduced in ECMAScript 2015. No other special features or syntax are used beyond what is required for the benchmark itself.

**Alternatives**

Other approaches to creating DOM nodes include:

* Using a library like jQuery or React to handle DOM manipulation and rendering.
* Using a framework like Angular or Vue.js, which provide built-in support for complex DOM structures and optimization techniques.
* Using a custom implementation of a virtual DOM or a headless browser service, like Puppeteer, to create and manipulate DOM nodes.

These alternatives may offer additional benefits, such as improved performance, better code organization, or easier maintenance, but they often come with additional dependencies, learning curves, or performance overheads.

Related benchmarks:

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

Comparing performance of: complex template vs complex javascript vs complex innerhtml

Created: 4 years ago by: Guest

Jump to the latest result

complex template

complex javascript

complex innerhtml

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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