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: 3 months 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 gemma2:9b, generated one year ago):

LLMs can make mistakes. Check important info.

This benchmark tests three different methods of creating new DOM elements in JavaScript and compares their performance:

**1. `createElement`:**

* **Method:** Creates a new `<div>` element using `document.createElement('div')`, adds a child `<p>` element, sets its text content, and appends the paragraph to the div. This is repeated for 100,000 elements.
* **Pros:**  Generally considered a performant way to create DOM elements. It's direct and efficient.
* **Cons:** Can be more verbose than other methods if you need to set multiple attributes or styles.

**2. `cloneNode(false)`:**

* **Method:** Creates a single `<div>` element initially, adds a child `<p>` element with text content as before. Then, it uses `div.cloneNode(false)` (which creates a shallow copy) repeatedly to add new div elements to the list.
* **Pros:** Potentially faster than `createElement` if you're working with complex elements that already have content and attributes set. 
* **Cons:** Still requires creating the initial element, which adds overhead.  Shallow cloning might not be ideal if your elements need deep copies of nested elements.

**3. `innerHTML`:**

* **Method:** Creates a new `<div>` element using `document.createElement('div')`, then sets its inner HTML content to `<p class="font-bold">Hello!</p>`.
* **Pros:** Very concise and can be useful when you have pre-defined HTML snippets you want to insert. 
* **Cons:** Can be slower than the other methods because it involves parsing and manipulating the entire HTML string, which might lead to unnecessary work if your content is simple.

**Alternatives (Not tested in this benchmark):**

* **Template Literals:** Modern JavaScript offers template literals for creating dynamic HTML strings, potentially offering better performance than `innerHTML` depending on the complexity of your content.
* **DOM Fragment API:** The DOMFragment API allows you to create and manipulate a collection of nodes without immediately adding them to the document, which can be more efficient when dealing with large amounts of content.

**Considerations for Choosing a Method:**

* **Complexity of Elements:** For simple elements, `createElement` is often the fastest. For complex elements, `cloneNode(false)` might offer performance gains if you're reusing the same structure repeatedly.
* **Frequency of Element Creation:** If you're creating many elements, the overhead of individual methods can add up. Optimize for the specific use case.
* **Readability and Maintainability:** Choose a method that is clear and easy to understand for your team.

Remember, benchmarking results can vary depending on factors like browser, device, and JavaScript engine.

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 gemma2:9b, generated one year ago):