Benchmark: createElement vs cloneNode 1337

Tests:

createElement

var list = [],
    n = 0;
while(true) {
    n++;
  	list.push(document.createElement('div'));
    if(n===100000) 
        break;
}

AخA
 
var list = [],    n = 0;while(true) {    n++;    list.push(document.createElement('div'));    if(n===100000)         break;}

cloneNode true

var list = [],
    n = 0,
    node = document.createElement('div');
while(true) {
    n++;
  	list.push(node.cloneNode(true));
    if(n===100000) 
        break;
}

 
var list = [],    n = 0,    node = document.createElement('div');while(true) {    n++;    list.push(node.cloneNode(true));    if(n===100000)         break;}

cloneNode false

var list = [],
    n = 0,
    node = document.createElement('div');
while(true) {
    n++;
  	list.push(node.cloneNode(false));
    if(n===100000) 
        break;
}

 
var list = [],    n = 0,    node = document.createElement('div');while(true) {    n++;    list.push(node.cloneNode(false));    if(n===100000)         break;}

cloneNode no params

var list = [],
    n = 0,
    node = document.createElement('div');
while(true) {
    n++;
  	list.push(node.cloneNode());
    if(n===100000) 
        break;
}

 
var list = [],    n = 0,    node = document.createElement('div');while(true) {    n++;    list.push(node.cloneNode());    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 true
cloneNode false
cloneNode no params

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 years ago)

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

Browser/OS: Chrome 99 on Windows

View result in a separate tab

Test name	Executions per second
createElement	17.0 Ops/sec
cloneNode true	27.0 Ops/sec
cloneNode false	27.4 Ops/sec
cloneNode no params	27.7 Ops/sec

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

What is being tested?

MeasureThat.net is testing the performance of two approaches for creating new DOM elements: createElement and cloneNode. The benchmark simulates creating 100,000 new DOM elements using each approach.

Options compared

The options being compared are:

createElement: Creating a new DOM element from scratch using document.createElement('div').
cloneNode (with no parameters): Cloning an existing DOM element using node.cloneNode() without specifying any parameters.
cloneNode (with false parameter): Cloning an existing DOM element using node.cloneNode(false). This approach uses a shallow clone, which only copies the element's attributes and not its child nodes.
cloneNode (with true parameter): Cloning an existing DOM element using node.cloneNode(true). This approach uses a deep clone, which recursively copies all child nodes.

Pros and Cons of each approach

createElement:
- Pros: Can be faster for very large numbers of elements, as it doesn't rely on the original element's structure.
- Cons: Requires creating a new DOM element from scratch, which can lead to memory issues if not handled properly.
cloneNode (with no parameters):
- Pros: Quick and efficient, as it only requires cloning the existing element without modifying its structure.
- Cons: May be slower for large numbers of elements, as it relies on the original element's structure.
cloneNode (with false parameter):
- Pros: Faster than cloneNode with no parameters for small to medium-sized datasets.
- Cons: Only works for shallow clones and may not preserve some attributes or child nodes.
cloneNode (with true parameter):
- Pros: Preserves the original element's structure and child nodes, making it suitable for more complex cloning scenarios.
- Cons: May be slower than cloneNode with no parameters due to its deeper cloning process.

Library used

The benchmark uses the document.createElement() and Element.prototype.cloneNode() methods, which are built-in DOM API functions in modern browsers.

Special JS feature/syntax

None mentioned.

LLMs can make mistakes. Check important info.

**What is being tested?**

MeasureThat.net is testing the performance of two approaches for creating new DOM elements: `createElement` and `cloneNode`. The benchmark simulates creating 100,000 new DOM elements using each approach.

**Options compared**

The options being compared are:

1. **createElement**: Creating a new DOM element from scratch using `document.createElement('div')`.
2. **cloneNode (with no parameters)**: Cloning an existing DOM element using `node.cloneNode()` without specifying any parameters.
3. **cloneNode (with false parameter)**: Cloning an existing DOM element using `node.cloneNode(false)`. This approach uses a shallow clone, which only copies the element's attributes and not its child nodes.
4. **cloneNode (with true parameter)**: Cloning an existing DOM element using `node.cloneNode(true)`. This approach uses a deep clone, which recursively copies all child nodes.

**Pros and Cons of each approach**

1. **createElement**:
	* Pros: Can be faster for very large numbers of elements, as it doesn't rely on the original element's structure.
	* Cons: Requires creating a new DOM element from scratch, which can lead to memory issues if not handled properly.
2. **cloneNode (with no parameters)**:
	* Pros: Quick and efficient, as it only requires cloning the existing element without modifying its structure.
	* Cons: May be slower for large numbers of elements, as it relies on the original element's structure.
3. **cloneNode (with false parameter)**:
	* Pros: Faster than `cloneNode` with no parameters for small to medium-sized datasets.
	* Cons: Only works for shallow clones and may not preserve some attributes or child nodes.
4. **cloneNode (with true parameter)**:
	* Pros: Preserves the original element's structure and child nodes, making it suitable for more complex cloning scenarios.
	* Cons: May be slower than `cloneNode` with no parameters due to its deeper cloning process.

**Library used**

The benchmark uses the `document.createElement()` and `Element.prototype.cloneNode()` methods, which are built-in DOM API functions in modern browsers.

**Special JS feature/syntax**

None mentioned.

Related benchmarks:

createElement vs cloneNode 1337 (version: 0)

Faster way to create new dom elements before insertion

Comparing performance of: createElement vs cloneNode true vs cloneNode false vs cloneNode no params

Created: 3 years ago by: Guest

Jump to the latest result