Benchmark: createElement vs cloneNode (not deep) 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===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(false)); 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; }

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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/144 Version/11.1.1 Safari/605.1.15

Browser/OS: Safari 11 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
createElement	11.2 Ops/sec
cloneNode (deep)	62.6 Ops/sec
innerHTML	14.7 Ops/sec

Autogenerated LLM Summary (model llama3.1:latest, generated one year ago):

LLMs can make mistakes. Check important info.

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

**Benchmark Name**: `createElement vs cloneNode (not deep) vs innerHTML`
**Description**: The faster way to create new DOM elements before insertion

The benchmark compares three different methods for creating new DOM elements:

1. **`createElement`**: Using the `document.createElement()` method to create individual HTML elements (e.g., `div`, `p`) and append them to a list.
2. **`cloneNode` (deep)**: Cloning an existing HTML element using the `node.cloneNode(true)` method, which creates a deep copy of the original node, including all its child nodes.
3. **`innerHTML`**: Setting the `innerHTML` property of an HTML element to create a new DOM structure from a string.

**Test Cases**

We have three test cases, each with different benchmark definitions:

1. **`createElement`**: This test case creates 100,000 instances of `div` and `p` elements using `document.createElement()` and appends them to a list.
2. **`cloneNode (deep)`**: This test case creates one instance of `div` and `p` elements using `document.createElement()`, appends them to a cloneable node, and then clones this node 100,000 times using `node.cloneNode(true)`.
3. **`innerHTML`**: This test case creates one instance of `div` element with an inner HTML string set to '<p class="font-bold">Hello!</p>' and pushes it to a list 100,000 times.

**Library/Feature**

No specific library or feature is used in these tests, aside from the standard DOM APIs provided by modern browsers.

**Pros and Cons of each method:**

1. **`createElement`**:
	* Pros: Fast creation of individual HTML elements, good for small-scale element creation.
	* Cons: Can be slow when creating large numbers of elements due to repeated DOM node creation.
2. **`cloneNode (deep)`**:
	* Pros: Efficient way to create multiple copies of an existing HTML structure.
	* Cons: Requires pre-existing HTML structure and can be slower than `createElement` for small-scale element creation.
3. **`innerHTML`**:
	* Pros: Fast way to set the content of an HTML element, good for creating large numbers of elements from a string.
	* Cons: May lead to DOM node reuse issues if not properly managed.

**Other Considerations**

When deciding which method to use, consider factors such as:

* Performance requirements
* Element creation frequency
* Need for cloning or reusing existing DOM structures

In general, `createElement` is suitable for small-scale element creation, while `cloneNode (deep)` and `innerHTML` are better suited for larger-scale element creation.

Related benchmarks:

createElement vs cloneNode (not deep) vs innerHTML (version: 0)

Faster way to create new dom elements before insertion

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

Created: 4 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.1:latest, generated one year ago):