Benchmark: createElement vs cloneNode vs innerHTML(template)

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

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's dive into the details of this benchmark.

**Benchmark Definition**

The benchmark is testing three different ways to create new DOM elements (in this case, `div` and `p`) in preparation for insertion into the document:

1. **createElement**: Using the `document.createElement()` method to create a new element.
2. **cloneNode (deep)**: Cloning an existing element using the `element.cloneNode(true)` method, which creates a deep copy of the element and its children.
3. **innerHTML (template)**: Creating a template element, setting its inner HTML to a string containing the desired elements, and then appending the content of the template to a list.

**Test Case Details**

Each test case runs a loop that creates a specified number of new elements (100,000 in this case) using one of the three methods. The benchmark measures how many executions per second each method can achieve on a specific browser configuration.

**Library/Feature Usage**

In this benchmark, there is no external library usage. However, two test cases use special JavaScript features:

1. **cloneNode(true)**: This method creates a deep copy of an element and its children. The `true` parameter indicates that the cloned node should be a deep copy.
2. **innerHTML**: This property sets or gets the HTML content of an element.

**Pros/Cons and Alternatives**

Here's a brief summary of each approach:

1. **createElement**:
	* Pros: Simple, easy to use, and fast for creating elements from scratch.
	* Cons: May not be suitable for cloning complex structures with many children.
2. **cloneNode (deep)**:
	* Pros: Can clone complex structures with many children, preserving their original hierarchy.
	* Cons: Slower than `createElement` due to the overhead of cloning nodes.
3. **innerHTML (template)**:
	* Pros: Can create multiple elements at once by setting the inner HTML of a template element.
	* Cons: May not be suitable for creating complex structures or modifying individual elements.

Alternatives to these approaches include:

1. Using a library like **Mithril** or **Preact**, which provide optimized DOM manipulation APIs.
2. Implementing custom solutions using JavaScript's built-in **Element.prototype.attachShadow()** method or other low-level DOM APIs.
3. Utilizing **Web Assembly (WASM)**, which allows for direct execution of WebAssembly code in web browsers, potentially offering better performance than traditional JavaScript approaches.

These alternatives are not specifically tested in this benchmark but may be relevant depending on the specific use case and requirements.

Related benchmarks:

createElement vs cloneNode vs innerHTML(template) (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.1:latest, generated one year ago):