Benchmark: createElement vs cloneNode vs innerHTML vs innerHTML(single innerHTML)

Tests:

createElement
const list = []; let n = 0; while(true) { n++; const div = document.createElement('div'); const p = document.createElement('p'); p.classList.add('font-bold'); p.textContent = 'Hello!'; div.appendChild(p); list.push(div); if(n===100000) break; }
cloneNode (deep)
const list = []; let n = 0; const div = document.createElement('div'); const p = document.createElement('p'); p.classList.add('font-bold'); p.textContent = 'Hello!'; div.appendChild(p); while(true) { n++; list.push(div.cloneNode(true)); if(n===100000) break; }
innerHTML
const list = []; let n = 0; while(true) { n++; const div = document.createElement('div'); div.innerHTML = '<p class="font-bold">Hello!</p>'; list.push(div); if(n===100000) break; }
innerHTML single
const list = []; let n = 0; const div = document.createElement('div'); let s= ''; while(true) { n++; s+='<p class="font-bold">Hello!</p>'; if(n===100000) break; } div.innerHTML = s;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
createElement
cloneNode (deep)
innerHTML
innerHTML single

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 111 on Windows

View result in a separate tab

Test name	Executions per second
createElement	3.4 Ops/sec
cloneNode (deep)	9.0 Ops/sec
innerHTML	1.9 Ops/sec
innerHTML single	6.5 Ops/sec

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

LLMs can make mistakes. Check important info.

**What is being tested on MeasureThat.net?**

MeasureThat.net is testing four different approaches for creating new DOM elements: `createElement`, `cloneNode` (both shallow and deep), and `innerHTML`. The test cases are designed to measure the execution speed of each approach, with a focus on creating 100,000 identical HTML elements.

**Options being compared:**

1. **createElement**: Creating a new element using the `document.createElement()` method.
2. **cloneNode (deep)**: Cloning an existing element using the `cloneNode(true)` method, which creates a deep copy of the element.
3. **innerHTML**: Setting the inner HTML content of an existing element without creating a new one.

**Pros and Cons of each approach:**

1. **createElement**:
	* Pros: Fastest approach, as it only involves creating a new element with the specified attributes.
	* Cons: Requires additional code to set the child elements (in this case, a paragraph).
2. **cloneNode (deep)**:
	* Pros: Faster than `innerHTML` for large numbers of identical elements, as it avoids the overhead of setting inner HTML content.
	* Cons: Slower than `createElement`, as cloning an existing element involves copying its attributes and child nodes.
3. **innerHTML**:
	* Pros: Fastest approach when only changing the text content or attributes of an existing element.
	* Cons: Slow for creating large numbers of identical elements, as it involves setting inner HTML content which can be expensive.

**Library usage**

None of the test cases use any external libraries or frameworks. The `cloneNode` method is a native JavaScript function.

**Special JS features or syntax**

The test cases do not explicitly mention any special JavaScript features or syntax. However, the use of `let` and `const` declarations for variable assignment is modern JavaScript syntax introduced in ECMAScript 2015 (ES6).

**Other alternatives**

While not tested on MeasureThat.net, other approaches could include:

1. **template literals**: Using template literals to create HTML strings, which can be faster than concatenating strings.
2. **DOM manipulation libraries**: Using dedicated DOM manipulation libraries like jQuery or React, which may provide optimized performance for certain use cases.

These alternatives would require additional test cases and benchmarking to determine their performance relative to the approaches tested on MeasureThat.net.

Related benchmarks:

createElement vs cloneNode vs innerHTML vs innerHTML(single innerHTML) (version: 0)

Faster way to create new dom elements before insertion

Comparing performance of: createElement vs cloneNode (deep) vs innerHTML vs innerHTML single

Created: one year ago by: Guest

Jump to the latest result

createElement

cloneNode (deep)

innerHTML

innerHTML single

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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