Benchmark: L0n1 createElement vs cloneNode vs 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===1) 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===1) 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===1) 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:

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 provided JSON data and explain what's being tested.

**Benchmark Overview**

The benchmark is comparing three different approaches to create new DOM elements:

1. `createElement`: Creating a new element using the `document.createElement` method.
2. `cloneNode (deep)`: Cloning an existing element using the `cloneNode` method with the `true` argument, which indicates deep cloning.
3. `innerHTML`: Setting the inner HTML of an element.

**Test Cases**

Each test case is a separate benchmark that measures the performance of one of these approaches. Here's what each test case does:

1. **createElement**: Creates an empty list and increments a counter until it reaches 2. In each iteration, it creates a new `div` element and appends a `p` element to it using `appendChild`. The resulting elements are pushed into the list.
2. **cloneNode (deep)**: Similar to the first test case, but instead of creating a new element, it clones an existing empty `div` element using `cloneNode(true)`. This creates a deep clone of the original element, which includes all its child nodes and attributes.
3. **innerHTML**: Creates an empty list and increments a counter until it reaches 2. In each iteration, it sets the inner HTML of an existing `div` element to contain a `p` element with the text "Hello!". The resulting elements are pushed into the list.

**Library and Special JS Features**

* None of the test cases use any external libraries.
* No special JavaScript features or syntax are used in these test cases. They only rely on standard DOM manipulation methods.

**Comparison of Approaches**

The pros and cons of each approach are:

1. **createElement**:
	* Pros: Fastest, as it doesn't involve cloning an existing element.
	* Cons: Creates a new, empty element that needs to be populated with content, which can lead to slower performance if the list is large.
2. **cloneNode (deep)**:
	* Pros: Can be faster than creating a new element, especially for larger lists, as it avoids the overhead of cloning a new element.
	* Cons: Clones the entire original element, including all its attributes and child nodes, which can lead to slower performance if the cloned elements are large or have many dependencies.
3. **innerHTML**:
	* Pros: Can be faster than creating a new element, especially for larger lists, as it sets the inner HTML of an existing element without cloning or creating a new one.
	* Cons: Can lead to slower performance if the inner HTML is large or complex, as it involves setting and parsing the HTML string.

**Other Alternatives**

There are other approaches that could be used in place of these methods:

1. **Fragment**: Instead of using `appendChild` or `innerHTML`, a fragment could be created using `document.createDocumentFragment` to improve performance.
2. **RequestAnimationFrame**: The test cases could use `requestAnimationFrame` to schedule the creation and appending of elements, which can help avoid blocking the main thread.

However, these alternatives would likely require significant changes to the benchmark code and might not provide noticeable performance improvements for most use cases.

Related benchmarks:

L0n1 createElement vs cloneNode vs innerHTML (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

No previous run results

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