Benchmark: createElement vs cloneNode vs innerHTML for multi elements with optimized loops

Tests:

createElement
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'); 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); console.log(div); while(true) { n++; 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'); 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); while(true) { n++; list.push(div.cloneNode(true)); if(n===100000) break; }
innerHTML
const list = []; let n = 0; const div = document.createElement('div'); div.innerHTML = '<div><div class="two3"><div class="three"><p class="font-bold">Hello!</p></div></div></div>' console.log(div); while(true) { n++; 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: one month ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:145.0) Gecko/20100101 Firefox/145.0

Browser/OS: Firefox 145 on Linux

View result in a separate tab

Test name	Executions per second
createElement	1142.6 Ops/sec
cloneNode (deep)	6.1 Ops/sec
innerHTML	1132.9 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**Benchmark Definition**

The provided JSON represents a benchmark named "createElement vs cloneNode vs innerHTML for multi elements with optimized loops". This benchmark aims to measure which approach is faster when creating multiple DOM elements and appending them to an existing element.

**Options Compared**

There are three options being compared:

1. `createElement`: Creates new DOM elements using the `document.createElement()` method.
2. `cloneNode (deep)`: Clones existing DOM elements using the `cloneNode(true)` method, which creates a deep clone of the element.
3. `innerHTML`: Sets the inner HTML of an element using the `innerHTML` property.

**Pros and Cons**

* **createElement**: This approach is simple and efficient for creating new elements. However, it can be slower if the elements are complex or have many attributes.
* **cloneNode (deep)**: Cloning existing elements can be faster than creating new ones, especially if the elements are relatively simple. However, it may also create a deep copy of the element's children, which can lead to increased memory usage and slower performance.
* `innerHTML`: This approach is fast but may not work well with complex elements or attributes.

**Library and Purpose**

None are explicitly mentioned in this benchmark.

**Special JS Feature or Syntax**

There are no special JavaScript features or syntax used in this benchmark. It only relies on standard DOM APIs and JavaScript basics.

**Other Alternatives**

If you want to experiment with alternative approaches, here are some options:

* Using `DocumentFragment` instead of `innerHTML`
* Creating elements using a library like React or Angular
* Using Web Workers to create elements in parallel

However, these alternatives may not be relevant to this specific benchmark, and the focus is on comparing the three main approaches: `createElement`, `cloneNode (deep)`, and `innerHTML`.

**Benchmark Preparation Code**

The preparation code for this benchmark seems to be minimal, as it only creates some constants and an array. The actual benchmarking happens in the JavaScript code that defines each test case.

Keep in mind that creating a realistic and representative benchmark often requires more setup and preparation. This benchmark might be oversimplified or not representative of real-world scenarios.

Related benchmarks:

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

Faster way to create new dom elements before insertion

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

Created: 3 years ago by: Guest

Jump to the latest result

createElement

cloneNode (deep)

innerHTML

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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