Benchmark: createElement vs cloneNode vs innerHTML vs innerHTML(single 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(true));
    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(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;
}

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

innerHTML single

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

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

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
innerHTML single

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36

Browser/OS: Chrome 111 on Windows

View result in a separate tab

Test name	Executions per second
createElement	3.4 Ops/sec
cloneNode (deep)	9.0 Ops/sec
innerHTML	1.9 Ops/sec
innerHTML single	6.5 Ops/sec

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

What is being tested on MeasureThat.net?

MeasureThat.net is testing four different approaches for creating new DOM elements: createElement, cloneNode (both shallow and deep), and innerHTML. The test cases are designed to measure the execution speed of each approach, with a focus on creating 100,000 identical HTML elements.

Options being compared:

createElement: Creating a new element using the document.createElement() method.
cloneNode (deep): Cloning an existing element using the cloneNode(true) method, which creates a deep copy of the element.
innerHTML: Setting the inner HTML content of an existing element without creating a new one.

Pros and Cons of each approach:

createElement:
- Pros: Fastest approach, as it only involves creating a new element with the specified attributes.
- Cons: Requires additional code to set the child elements (in this case, a paragraph).
cloneNode (deep):
- Pros: Faster than innerHTML for large numbers of identical elements, as it avoids the overhead of setting inner HTML content.
- Cons: Slower than createElement, as cloning an existing element involves copying its attributes and child nodes.
innerHTML:
- Pros: Fastest approach when only changing the text content or attributes of an existing element.
- Cons: Slow for creating large numbers of identical elements, as it involves setting inner HTML content which can be expensive.

Library usage

None of the test cases use any external libraries or frameworks. The cloneNode method is a native JavaScript function.

Special JS features or syntax

The test cases do not explicitly mention any special JavaScript features or syntax. However, the use of let and const declarations for variable assignment is modern JavaScript syntax introduced in ECMAScript 2015 (ES6).

Other alternatives

While not tested on MeasureThat.net, other approaches could include:

template literals: Using template literals to create HTML strings, which can be faster than concatenating strings.
DOM manipulation libraries: Using dedicated DOM manipulation libraries like jQuery or React, which may provide optimized performance for certain use cases.

These alternatives would require additional test cases and benchmarking to determine their performance relative to the approaches tested on MeasureThat.net.

LLMs can make mistakes. Check important info.

**What is being tested on MeasureThat.net?**

MeasureThat.net is testing four different approaches for creating new DOM elements: `createElement`, `cloneNode` (both shallow and deep), and `innerHTML`. The test cases are designed to measure the execution speed of each approach, with a focus on creating 100,000 identical HTML elements.

**Options being compared:**

1. **createElement**: Creating a new element using the `document.createElement()` method.
2. **cloneNode (deep)**: Cloning an existing element using the `cloneNode(true)` method, which creates a deep copy of the element.
3. **innerHTML**: Setting the inner HTML content of an existing element without creating a new one.

**Pros and Cons of each approach:**

1. **createElement**:
	* Pros: Fastest approach, as it only involves creating a new element with the specified attributes.
	* Cons: Requires additional code to set the child elements (in this case, a paragraph).
2. **cloneNode (deep)**:
	* Pros: Faster than `innerHTML` for large numbers of identical elements, as it avoids the overhead of setting inner HTML content.
	* Cons: Slower than `createElement`, as cloning an existing element involves copying its attributes and child nodes.
3. **innerHTML**:
	* Pros: Fastest approach when only changing the text content or attributes of an existing element.
	* Cons: Slow for creating large numbers of identical elements, as it involves setting inner HTML content which can be expensive.

**Library usage**

None of the test cases use any external libraries or frameworks. The `cloneNode` method is a native JavaScript function.

**Special JS features or syntax**

The test cases do not explicitly mention any special JavaScript features or syntax. However, the use of `let` and `const` declarations for variable assignment is modern JavaScript syntax introduced in ECMAScript 2015 (ES6).

**Other alternatives**

While not tested on MeasureThat.net, other approaches could include:

1. **template literals**: Using template literals to create HTML strings, which can be faster than concatenating strings.
2. **DOM manipulation libraries**: Using dedicated DOM manipulation libraries like jQuery or React, which may provide optimized performance for certain use cases.

These alternatives would require additional test cases and benchmarking to determine their performance relative to the approaches tested on MeasureThat.net.

Related benchmarks:

createElement vs cloneNode vs innerHTML vs innerHTML(single innerHTML) (version: 0)

Faster way to create new dom elements before insertion

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

Created: one year ago by: Guest

Jump to the latest result