Benchmark: createElement vs cloneNode vs innerHTML for multi elements

Tests:

createElement
const list = []; let n = 0; while(true) { n++; const div = document.createElement('div'); const div2 = document.createElement('div'); const div3 = document.createElement('div'); const p = document.createElement('p'); div2.classList.add('two'); div3.classList.add('three'); p.classList.add('font-bold'); p.textContent = 'Hello!'; div.appendChild(div2); div2.appendChild(div3); div3.appendChild(p); list.push(div); if(n===100000) break; }
cloneNode (deep)
const list = []; let n = 0; const div = document.createElement('div'); const div2 = document.createElement('div'); const div3 = document.createElement('div'); const p = document.createElement('p'); p.classList.add('font-bold'); p.textContent = 'Hello!'; div.appendChild(div2); div2.appendChild(div3); div3.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 = '<div class="two"><div class="three"><p class="font-bold">Hello!</p></div></div>'; list.push(div); if(n===100000) break; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
createElement
cloneNode (deep)
innerHTML

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; rv:106.0) Gecko/20100101 Firefox/106.0

Browser/OS: Firefox 106 on Windows

View result in a separate tab

Test name	Executions per second
createElement	2.5 Ops/sec
cloneNode (deep)	9.9 Ops/sec
innerHTML	3.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark.

**What is being tested?**

The benchmark tests three ways to create new DOM elements: `createElement`, `cloneNode` (specifically, `cloneNode(true)` which clones the element deeply), and `innerHTML`. The test case creates a specific structure with multiple nested `div` and `p` elements, adds some classes to them, sets their text content, and appends them to each other in a loop. This is done to create a large array of DOM elements that need to be pushed onto the `list`.

**Options being compared:**

1. **createElement**: Creates new DOM elements from scratch using the `document.createElement` method.
2. **cloneNode (deep)**: Clones existing DOM elements, including their children and attributes, using the `cloneNode(true)` method.
3. **innerHTML**: Sets the inner HTML of an element to create a new content document.

**Pros and Cons of each approach:**

1. **createElement**:
	* Pros: Fastest way to create new elements, as it doesn't require cloning existing ones.
	* Cons: Requires more CPU resources, as it involves creating a new DOM node from scratch.
2. **cloneNode (deep)**:
	* Pros: Faster than `innerHTML`, as it only requires cloning an existing element and its children.
	* Cons: May be slower for small elements or those with simple structures, as the clone process can be more complex.
3. **innerHTML**:
	* Pros: Fastest way to set content in a DOM element, as it creates a new document object.
	* Cons: Requires setting the inner HTML of an existing element, which may not be desirable if you want to preserve the original element's structure.

**Library used:**

None explicitly mentioned. However, `document.createElement` and `cloneNode` are standard JavaScript methods that work across all browsers.

**Special JS feature or syntax:**

None mentioned in this benchmark.

**Considerations:**

* The test case uses a large number of elements to create a high-traffic scenario.
* The use of `innerHTML` may be affected by the browser's rendering engine, as it creates a new document object that needs to be parsed and rendered.
* The `cloneNode` method is more efficient for creating nested elements, but may be slower for single-level elements or those with complex structures.

**Alternatives:**

1. **Template literals**: Instead of using `innerHTML`, you could use template literals (e.g., `${element.innerHTML}`) to set content in a DOM element.
2. **DOM fragment**: Browsers have an internal DOM fragment mechanism that allows creating and manipulating a tree-like structure without allocating new memory for each node. This can be used instead of `cloneNode` or `innerHTML`.
3. **Web Workers**: If you need to create a large number of elements in parallel, you could use Web Workers to offload the work to separate threads.

Keep in mind that these alternatives may have different performance characteristics and might not be suitable for all use cases.

Related benchmarks:

createElement vs cloneNode vs innerHTML for multi elements (version: 0)

Faster way to create new dom elements before insertion

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

Created: 2 years ago by: Guest

Jump to the latest result

createElement

cloneNode (deep)

innerHTML

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):