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

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); content.querySelector('.complex').classList.add('newClass'); content.querySelector('.simple-4').setAttribute('data-test', 'sometestvalue'); content.querySelector('.simple-3').setAttribute('something', 'somevalue'); el.appendChild(content);
complex javascript
let el = document.createElement("span"); el.classList.add("complex"); el.classList.add("newClass"); 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"); span3.setAttribute('something', 'somevalue'); let span31 = document.createElement("span"); span31.classList.add("simple-31"); span3.appendChild(span31); let span4 = document.createElement("span"); span4.classList.add("simple-4"); span4.setAttribute('data-test', 'sometestvalue'); 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.

Let's break down the benchmark and explain what is being tested.

**Benchmark Definition**

The benchmark measures the performance of creating DOM nodes in three different ways:

1. **Template**: Using HTML templates with `template` elements, specifically cloning the inner content of a template element.
2. **Vanilla JavaScript**: Creating DOM elements using plain JavaScript, without any libraries or helpers.
3. **InnerHTML**: Setting the inner HTML of an existing element to create new child nodes.

**Options Compared**

The benchmark compares these three approaches:

* **Template**: Cloning the inner content of a `template` element
* **Vanilla JavaScript**: Creating DOM elements using plain JavaScript, with explicit cloning or appending methods
* **InnerHTML**: Setting the inner HTML of an existing element to create new child nodes

**Pros and Cons**

Here's a brief summary of each approach:

* **Template**:
	+ Pros: Fast creation of complex structures due to template engine optimization.
	+ Cons: May require additional setup and configuration, and might not be supported in all browsers or environments.
* **Vanilla JavaScript**:
	+ Pros: Widely supported, easy to implement, and flexible.
	+ Cons: Can be slower for complex structures due to explicit cloning or appending methods.
* **InnerHTML**:
	+ Pros: Fast and simple, as it leverages the browser's native DOM manipulation capabilities.
	+ Cons: May not work well with complex or deeply nested structures.

**Library Usage**

None of the benchmark tests use external libraries.

**Special JavaScript Features/Syntax**

The benchmark does not explicitly mention any special JavaScript features or syntax. However, some approaches might require specific knowledge of template engine syntax (e.g., Mustache or Handlebars).

**Other Alternatives**

If these three approaches are not sufficient for your needs, you might consider:

* **DOM manipulation libraries**: Libraries like jQuery or React can provide additional features and optimizations for DOM manipulation.
* **Template engines**: Specialized template engines like Handlebars or Pug can offer more advanced features for building complex structures.

**Benchmark Results**

The latest benchmark results show that the **template** approach is slightly faster than **vanilla JavaScript**, while **innerHTML** is slower. However, it's essential to note that these results might vary depending on your specific use case and environment.

Related benchmarks:

Different ways (template, vanilla js, innerHTML) to create DOM nodes2 (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):