Benchmark: 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===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; while(true) { n++; const div = document.createElement('div'); div.innerHTML = '<p class="font-bold">Hello!</p>'; list.push(div); if(n===100000) break; }

Historical Performance Data aggregated from 130 community runs

Desktop Results:

Chrome 88 runs

cloneNode (deep)

13/s

innerHTML

6/s

createElement

5/s

Fastest: cloneNode (deep) (2.5x faster)

View exact numbers

✓ cloneNode (deep): 13 ops/sec
• innerHTML: 6 ops/sec
• createElement: 5 ops/sec

Firefox 33 runs

cloneNode (deep)

16/s

innerHTML

6/s

createElement

6/s

Fastest: cloneNode (deep) (2.8x faster)

View exact numbers

✓ cloneNode (deep): 16 ops/sec
• innerHTML: 6 ops/sec
• createElement: 6 ops/sec

Mobile Results:

Chrome 9 runs

cloneNode (deep)

8/s

createElement

3/s

innerHTML

2/s

Fastest: cloneNode (deep) (3.7x faster)

View exact numbers

✓ cloneNode (deep): 8 ops/sec
• createElement: 3 ops/sec
• innerHTML: 2 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: 4 months ago)

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

Browser/OS: Firefox 148 on Linux

View result in a separate tab

cloneNode (deep)

42/s

innerHTML

13/s

createElement

12/s

View exact numbers

Test name	Executions per second
✓ cloneNode (deep)	42 Ops/sec
innerHTML	13 Ops/sec
createElement	12 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmarking setup and explanations.

**Benchmark Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The goal is to compare different approaches for creating new DOM elements, specifically `createElement`, `cloneNode` (with deep cloning), and `innerHTML`. This comparison helps identify which method is faster for creating new DOM elements before insertion.

**Library Used**

In the benchmark setup, the `document.createElement()` function is used without any additional libraries. The `innerHTML` property is a built-in JavaScript feature that sets or gets the HTML content of an element.

**Test Case Analysis**

1. **createElement**: In this test case, 100,000 DOM elements are created using `document.createElement('div')`. Each element has a child `p` element with class `font-bold` and text content 'Hello!'. This creates a nested structure.
2. **cloneNode (deep)**: Similar to the first test case, but instead of creating new elements directly, 100,000 clones are created using `cloneNode(true)`. The cloned elements are then added to an array for further processing. Note that this approach uses deep cloning, which creates a new copy of the entire DOM structure.
3. **innerHTML**: In this test case, 100,000 DOM elements are created by setting the `innerHTML` property of an empty `div` element to a string containing a child `p` element with class `font-bold` and text content 'Hello!'. The resulting elements are then added to an array.

**Pros and Cons**

* **createElement**: This method is fast, but it creates new elements from scratch. It may lead to memory leaks if not properly cleaned up.
* **cloneNode (deep)**: Deep cloning can be slower than creating new elements directly, especially for large datasets. However, it ensures that the cloned structure is identical to the original and avoids potential memory issues with deeply nested objects.
* **innerHTML**: This method is likely to be the slowest due to the overhead of parsing and compiling the HTML string into a DOM structure.

**Other Considerations**

* **Browser Support**: The benchmark results were obtained using Chrome 129, which might not be representative of other browsers. Different browsers may have varying performance characteristics for each test case.
* **Device Platform**: The benchmark was run on a desktop platform, which may affect the results compared to mobile or tablet devices.

**Alternatives**

If you're interested in exploring alternative approaches, consider using:

1. **Template literals**: Instead of `innerHTML`, template literals (e.g., `const html = `<p class="font-bold">Hello!</p>``) can be used to create DOM elements more efficiently.
2. **Document fragment**: Using a `DocumentFragment` object (e.g., `const fragment = document.createDocumentFragment()`) can help reduce the overhead of creating and appending DOM elements.

Keep in mind that these alternatives might not be directly comparable to the original benchmark test cases, as they may have different use cases or performance characteristics.

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: 5 years ago by: Guest

Go to the latest result

createElement

cloneNode (deep)

innerHTML

Historical Performance Data aggregated from 130 community runs

Desktop Results:

Chrome 88 runs

Firefox 33 runs

Mobile Results:

Chrome 9 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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: 5 years ago by: Guest

Go to the latest result

createElement

cloneNode (deep)

innerHTML

Historical Performance Data aggregated from 130 community runs

Desktop Results:

Chrome 88 runs

Firefox 33 runs

Mobile Results:

Chrome 9 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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