Benchmark: createElement vs cloneNode vs innerHTML for multi elements with optimized loops

Tests:

createElement

const list = [];
let n = 0;

const div = document.createElement('div');
const div2 = document.createElement('div');
const div3 = document.createElement('div');
const p = document.createElement('p');
div2.classList.add('two');
div3.classList.add('three');
p.classList.add('font-bold');
p.textContent = 'Hello!';
div.appendChild(div2);
div2.appendChild(div3);
div3.appendChild(p);
console.log(div);
while(true) {
    n++;
  	list.push(div);
    if(n===100000) 
        break;
}

​x
 
const list = [];let n = 0;​const div = document.createElement('div');const div2 = document.createElement('div');const div3 = document.createElement('div');const p = document.createElement('p');div2.classList.add('two');div3.classList.add('three');p.classList.add('font-bold');p.textContent = 'Hello!';div.appendChild(div2);div2.appendChild(div3);div3.appendChild(p);console.log(div);while(true) {    n++;    list.push(div);    if(n===100000)         break;}

cloneNode (deep)

const list = [];
let n = 0;
const div = document.createElement('div');
const div2 = document.createElement('div');
const div3 = document.createElement('div');
const p = document.createElement('p');
div2.classList.add('two');
div3.classList.add('three');
p.classList.add('font-bold');
p.textContent = 'Hello!';
div.appendChild(div2);
div2.appendChild(div3);
div3.appendChild(p);
while(true) {
    n++;
  	list.push(div.cloneNode(true));
    if(n===100000) 
        break;
}

 
const list = [];let n = 0;const div = document.createElement('div');const div2 = document.createElement('div');const div3 = document.createElement('div');const p = document.createElement('p');div2.classList.add('two');div3.classList.add('three');p.classList.add('font-bold');p.textContent = 'Hello!';div.appendChild(div2);div2.appendChild(div3);div3.appendChild(p);while(true) {    n++;    list.push(div.cloneNode(true));    if(n===100000)         break;}

innerHTML

const list = [];
let n = 0;
const div = document.createElement('div');
div.innerHTML = '<div><div class="two3"><div class="three"><p class="font-bold">Hello!</p></div></div></div>'
console.log(div);
while(true) {
    n++;
  	list.push(div);
    if(n===100000) 
        break;
}

 
const list = [];let n = 0;const div = document.createElement('div');div.innerHTML = '<div><div class="two3"><div class="three"><p class="font-bold">Hello!</p></div></div></div>'console.log(div);while(true) {    n++;    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: 2 years ago)

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

Browser/OS: Firefox 106 on Windows

View result in a separate tab

Test name	Executions per second
createElement	1001.0 Ops/sec
cloneNode (deep)	4.7 Ops/sec
innerHTML	1084.3 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 4 months ago):

Let's dive into the world of JavaScript microbenchmarks!

Benchmark Definition

The provided JSON represents a benchmark named "createElement vs cloneNode vs innerHTML for multi elements with optimized loops". This benchmark aims to measure which approach is faster when creating multiple DOM elements and appending them to an existing element.

Options Compared

There are three options being compared:

createElement: Creates new DOM elements using the document.createElement() method.
cloneNode (deep): Clones existing DOM elements using the cloneNode(true) method, which creates a deep clone of the element.
innerHTML: Sets the inner HTML of an element using the innerHTML property.

Pros and Cons

createElement: This approach is simple and efficient for creating new elements. However, it can be slower if the elements are complex or have many attributes.
cloneNode (deep): Cloning existing elements can be faster than creating new ones, especially if the elements are relatively simple. However, it may also create a deep copy of the element's children, which can lead to increased memory usage and slower performance.
innerHTML: This approach is fast but may not work well with complex elements or attributes.

Library and Purpose

None are explicitly mentioned in this benchmark.

Special JS Feature or Syntax

There are no special JavaScript features or syntax used in this benchmark. It only relies on standard DOM APIs and JavaScript basics.

Other Alternatives

If you want to experiment with alternative approaches, here are some options:

Using DocumentFragment instead of innerHTML
Creating elements using a library like React or Angular
Using Web Workers to create elements in parallel

However, these alternatives may not be relevant to this specific benchmark, and the focus is on comparing the three main approaches: createElement, cloneNode (deep), and innerHTML.

Benchmark Preparation Code

The preparation code for this benchmark seems to be minimal, as it only creates some constants and an array. The actual benchmarking happens in the JavaScript code that defines each test case.

Keep in mind that creating a realistic and representative benchmark often requires more setup and preparation. This benchmark might be oversimplified or not representative of real-world scenarios.

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**Benchmark Definition**

**Options Compared**

There are three options being compared:

1. `createElement`: Creates new DOM elements using the `document.createElement()` method.
2. `cloneNode (deep)`: Clones existing DOM elements using the `cloneNode(true)` method, which creates a deep clone of the element.
3. `innerHTML`: Sets the inner HTML of an element using the `innerHTML` property.

**Pros and Cons**

* **createElement**: This approach is simple and efficient for creating new elements. However, it can be slower if the elements are complex or have many attributes.
* **cloneNode (deep)**: Cloning existing elements can be faster than creating new ones, especially if the elements are relatively simple. However, it may also create a deep copy of the element's children, which can lead to increased memory usage and slower performance.
* `innerHTML`: This approach is fast but may not work well with complex elements or attributes.

**Library and Purpose**

None are explicitly mentioned in this benchmark.

**Special JS Feature or Syntax**

There are no special JavaScript features or syntax used in this benchmark. It only relies on standard DOM APIs and JavaScript basics.

**Other Alternatives**

If you want to experiment with alternative approaches, here are some options:

* Using `DocumentFragment` instead of `innerHTML`
* Creating elements using a library like React or Angular
* Using Web Workers to create elements in parallel

However, these alternatives may not be relevant to this specific benchmark, and the focus is on comparing the three main approaches: `createElement`, `cloneNode (deep)`, and `innerHTML`.

**Benchmark Preparation Code**

The preparation code for this benchmark seems to be minimal, as it only creates some constants and an array. The actual benchmarking happens in the JavaScript code that defines each test case.

Keep in mind that creating a realistic and representative benchmark often requires more setup and preparation. This benchmark might be oversimplified or not representative of real-world scenarios.

Related benchmarks:

createElement vs cloneNode vs innerHTML for multi elements with optimized loops (version: 0)

Faster way to create new dom elements before insertion

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

Created: 2 years ago by: Guest

Jump to the latest result