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; }

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: 2 days ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:128.0) Gecko/20100101 Firefox/128.0

Browser/OS: Firefox 128 on Windows

View result in a separate tab

Test name	Executions per second
createElement	3.9 Ops/sec
cloneNode (deep)	10.4 Ops/sec
innerHTML	1.9 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one month 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.

Related benchmarks:

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

Jump to the latest result

createElement

cloneNode (deep)

innerHTML

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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