Benchmark: createElement vs cloneNode 2

Tests:

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

Historical Performance Data aggregated from 34 community runs

Desktop Results:

Chrome 17 runs

createElement

697K/s

cloneNode

553K/s

Fastest: createElement (1.3x faster)

View exact numbers

✓ createElement: 696,888 ops/sec
• cloneNode: 552,766 ops/sec

Firefox 9 runs

cloneNode

705K/s

createElement

483K/s

Fastest: cloneNode (1.5x faster)

View exact numbers

✓ cloneNode: 705,131 ops/sec
• createElement: 483,493 ops/sec

Mobile Results:

Chrome 8 runs

createElement

353K/s

cloneNode

213K/s

Fastest: createElement (1.7x faster)

View exact numbers

✓ createElement: 352,796 ops/sec
• cloneNode: 213,070 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
createElement
cloneNode

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 12 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/150.0.0.0 Safari/537.36

Browser/OS: Chrome 150 on Mac OS X 10.15.7

View result in a separate tab

createElement

1.8M/s

cloneNode

1.3M/s

View exact numbers

Test name	Executions per second
✓ createElement	1,807,841 Ops/sec
cloneNode	1,274,751 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the provided JSON data and explain what's being tested, compared, and the pros and cons of each approach.

**Benchmark Overview**

The benchmark compares two approaches to create new DOM elements: `createElement` vs `cloneNode`. The goal is to determine which method is faster for creating a large number of new DOM elements before insertion.

**Script Preparation Code**

Since both benchmarks don't require any script preparation code, we can skip this section.

**Html Preparation Code**

Again, since there's no html preparation code provided, we can move on.

**Individual Test Cases**

We have two test cases:

1. **createElement**
```javascript
var list = [], n = 0; while(true) { n++; list.push(document.createElement('div')); if(n===10) break; }
```
This benchmark creates a new `div` element using the `createElement` method and adds it to an array (`list`) on every iteration of a loop. The loop continues until `n` reaches 10.

2. **cloneNode**
```javascript
var list = [], n = 0, node = document.createElement('div'); while(true) { n++; list.push(node.cloneNode(true)); if(n===11) break; }
```
This benchmark creates a new `div` element using the `createElement` method and assigns it to a variable (`node`). Then, on every iteration of a loop, it clones the original node using the `cloneNode` method with `true` as an argument (which means deep cloning) and adds the cloned node to an array (`list`). The loop continues until `n` reaches 11.

**Library Used**

In both benchmarks, the `document` object is used. This is a built-in JavaScript object that provides access to various DOM-related APIs.

**Special JS Feature/Syntax**

There's no special JS feature or syntax mentioned in these benchmarks.

**Benchmark Comparison**

The comparison between `createElement` and `cloneNode` can be broken down into two main approaches:

1. **Direct Creation**: The first approach (`createElement`) involves directly creating a new DOM element using the `createElement` method.
2. **Cloning**: The second approach (`cloneNode`) involves cloning an existing DOM element (in this case, a newly created `div` element) using the `cloneNode` method.

**Pros and Cons**

1. **Direct Creation (`createElement`)**:
	* Pros: Creates a new, independent DOM element from scratch.
	* Cons: May require additional setup or configuration for certain elements.
2. **Cloning (`cloneNode`)**:
	* Pros: Reuses the existing DOM element, which can be more efficient in terms of resources and memory usage.
	* Cons: May lead to issues if the cloned node is not properly configured or updated.

**Benchmark Results**

The latest benchmark results show that `cloneNode` outperforms `createElement`, with an execution rate of 224315.203125 executions per second compared to 172580.734375 executions per second for `createElement`. However, it's essential to consider the context and requirements of your specific use case when choosing between these approaches.

**Other Alternatives**

If you need to create a large number of DOM elements frequently, other alternatives to consider are:

* **Fragment**: Using a fragment element (`<div id="fragment"></div>`) instead of individual `div` elements can improve performance.
* **Batch Creation**: Creating multiple DOM elements in batches using arrays or buffers can also optimize performance.

Keep in mind that the best approach depends on your specific use case and requirements.

createElement vs cloneNode 2 (version: 1)

Faster way to create new dom elements before insertion

Comparing performance of: `createElement vs cloneNode`

Created: 5 years ago by: Registered User

Go to the latest result

createElement

cloneNode

Historical Performance Data aggregated from 34 community runs

Desktop Results:

Chrome 17 runs

Firefox 9 runs

Mobile Results:

Chrome 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

createElement vs cloneNode 2 (version: 1)

Faster way to create new dom elements before insertion

Comparing performance of: createElement vs cloneNode

Created: 5 years ago by: Registered User

Go to the latest result

createElement

cloneNode

Historical Performance Data aggregated from 34 community runs

Desktop Results:

Chrome 17 runs

Firefox 9 runs

Mobile Results:

Chrome 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Related benchmarks

Comparing performance of: `createElement vs cloneNode`