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

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

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

 
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

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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 (iPhone; CPU iPhone OS 15_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/112.0.5615.167 Mobile/15E148 Safari/604.1

Browser/OS: Chrome Mobile iOS 112 on iOS 15.1

View result in a separate tab

Test name	Executions per second
createElement	2.3 Ops/sec
cloneNode (deep)	14.1 Ops/sec
innerHTML	1.9 Ops/sec

Autogenerated LLM Summary (model gemma2:9b, generated 6 months ago):

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.

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

Jump to the latest result