Benchmark: createElement vs cloneNode vs innerHTML 2

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; 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.innerHTML); 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 year ago)

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

Browser/OS: Chrome 125 on Windows

View result in a separate tab

Test name	Executions per second
createElement	4.8 Ops/sec
cloneNode (deep)	12.5 Ops/sec
innerHTML	25.6 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 Overview**

The provided JSON represents a benchmark test that compares three different approaches to create new DOM elements: `createElement`, `cloneNode (deep)`, and `innerHTML`. The test aims to determine which approach is faster for creating new DOM elements before insertion.

**Test Cases**

There are three individual test cases:

1. `createElement`: This test case creates a new `div` element with an appended `p` element containing the text "Hello!". The resulting array of `div` elements is then pushed onto a list 100,000 times.
2. `cloneNode (deep)`: This test case starts by creating a single `div` element with an appended `p` element containing the text "Hello!". Then, it uses the `cloneNode(true)` method to create deep clones of this `div` element and appends them onto a list 100,000 times.
3. `innerHTML`: This test case creates a new `div` element with an appended `p` element containing the text "Hello!". The resulting `innerHTML` value is then pushed onto a list 100,000 times.

**Options Compared**

The three options compared are:

* **createElement**: Creates a new DOM element using the `document.createElement()` method.
* **cloneNode (deep)**: Creates a deep clone of an existing DOM element using the `cloneNode(true)` method and appends it to an array.
* **innerHTML**: Retrieves the HTML content of an existing DOM element using the `innerHTML` property.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

1. **createElement**:
	* Pros: Fast, easy to use, and creates a new, independent DOM element.
	* Cons: Can be slower for large numbers of elements due to the overhead of creating multiple DOM nodes.
2. **cloneNode (deep)**:
	* Pros: Creates a deep clone of an existing element, which can be useful for preserving the original element's state.
	* Cons: Slower than `createElement` since it involves cloning an entire element tree.
3. **innerHTML**:
	* Pros: Fast and convenient, as it only retrieves the HTML content of an existing element.
	* Cons: Not suitable for creating new DOM elements, as it only returns the text content.

**Library Usage**

None of the test cases use any external libraries or frameworks.

**Special JS Features or Syntax**

There are no special JavaScript features or syntax mentioned in the benchmark definitions. The code is straightforward and uses standard JavaScript constructs.

**Alternatives**

If you need to create new DOM elements, you may also consider using other approaches such as:

* Using a library like jQuery's `append()` method, which can be faster than creating individual DOM elements.
* Utilizing Webpack or another bundler to optimize the creation of multiple DOM elements.
* Leveraging browser-specific features like HTML5's `<template>` element to create isolated DOM fragments.

However, these alternatives may not provide a direct comparison with the three options tested in this benchmark.

Related benchmarks:

createElement vs cloneNode vs innerHTML 2 (version: 0)

Faster way to create new dom elements before insertion

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

Created: one year 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):