Benchmark: createElement vs cloneNode

Tests:

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

Historical Performance Data aggregated from 383 community runs

Desktop Results:

Chrome 221 runs

cloneNode

44/s

createElement

32/s

Fastest: cloneNode (1.4x faster)

View exact numbers

✓ cloneNode: 44 ops/sec
• createElement: 32 ops/sec

Firefox 89 runs

cloneNode

40/s

createElement

24/s

Fastest: cloneNode (1.7x faster)

View exact numbers

✓ cloneNode: 40 ops/sec
• createElement: 24 ops/sec

Safari 15 runs

cloneNode

98/s

createElement

74/s

Fastest: cloneNode (1.3x faster)

View exact numbers

✓ cloneNode: 98 ops/sec
• createElement: 74 ops/sec

Other 7 runs

cloneNode

20/s

createElement

11/s

Fastest: cloneNode (1.9x faster)

View exact numbers

✓ cloneNode: 20 ops/sec
• createElement: 11 ops/sec

Mobile Results:

Chrome 27 runs

cloneNode

23/s

createElement

19/s

Fastest: cloneNode (1.2x faster)

View exact numbers

✓ cloneNode: 23 ops/sec
• createElement: 19 ops/sec

Safari 15 runs

cloneNode

89/s

createElement

76/s

Fastest: cloneNode (1.2x faster)

View exact numbers

✓ cloneNode: 89 ops/sec
• createElement: 76 ops/sec

Firefox 9 runs

cloneNode

21/s

createElement

13/s

Fastest: cloneNode (1.7x faster)

View exact numbers

✓ cloneNode: 21 ops/sec
• createElement: 13 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: 2 months ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 148 on Android

View result in a separate tab

createElement

44/s

cloneNode

36/s

View exact numbers

Test name	Executions per second
✓ createElement	44 Ops/sec
cloneNode	36 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

The provided JSON represents two test cases, each designed to measure the performance difference between creating new DOM elements using `document.createElement` versus cloning existing elements using `cloneNode`.

**Test Case 1: createElement**

In this test case, a loop is executed 100,000 times, where in each iteration, a new `div` element is created and pushed onto an array called `list`. The goal is to determine which approach is faster.

The pros of using `document.createElement` are:

* It's a straightforward way to create new elements without modifying existing ones.
* It allows for more control over the creation process.

However, it also has some cons:

* Creating new elements can be slower than cloning existing ones.
* Memory allocation and deallocation can occur during each iteration, affecting performance.

**Test Case 2: cloneNode**

In this test case, a loop is executed 100,000 times, where in each iteration, an existing `div` element (created using `document.createElement('div')`) is cloned and pushed onto the same array (`list`). The goal is to determine which approach is faster.

The pros of using `cloneNode` are:

* Cloning elements can be faster than creating new ones.
* It avoids memory allocation and deallocation, as the original element remains in memory.

However, it also has some cons:

* Modifying existing elements can be slower than creating new ones.
* The cloned element may not have all the attributes of the original element.

**Other Considerations**

When comparing these two approaches, it's essential to consider factors like:

* Browser support: Both `createElement` and `cloneNode` are widely supported, but `cloneNode` might be more efficient in older browsers or those with limited DOM manipulation capabilities.
* Performance impact on memory: Creating new elements can lead to increased memory usage, while cloning existing elements avoids this issue.

**Library Usage**

There is no library used in these test cases. The code relies solely on the JavaScript standard library and the Document Object Model (DOM) APIs.

**Special JS Features or Syntax**

The `cloneNode` method uses a special feature of the DOM API, which allows for efficient cloning of elements while preserving their attributes. This optimization can lead to faster performance compared to creating new elements from scratch.

Now that we've explored the test cases and their pros and cons, let's discuss alternative approaches:

* **Other methods for creating new elements**:
	+ Using a library like jQuery or React, which might provide more efficient DOM manipulation APIs.
	+ Employing Web Workers or WebAssembly to offload CPU-intensive tasks like element creation.
* **Alternative cloning techniques**:
	+ Using `DOMParser` and `DOMSerializer` to create new elements from string templates.
	+ Implementing a custom cloning algorithm using JavaScript's native data structures.

Keep in mind that these alternatives might introduce additional complexity, dependencies, or performance trade-offs. The choice of approach ultimately depends on the specific requirements and constraints of your project.

createElement vs cloneNode (version: 0)

Faster way to create new dom elements before insertion

Comparing performance of: `createElement vs cloneNode`

Created: 9 years ago by: Guest

Go to the latest result

createElement

cloneNode

Historical Performance Data aggregated from 383 community runs

Desktop Results:

Chrome 221 runs

Firefox 89 runs

Safari 15 runs

Other 7 runs

Mobile Results:

Chrome 27 runs

Safari 15 runs

Firefox 9 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 (version: 0)

Faster way to create new dom elements before insertion

Comparing performance of: createElement vs cloneNode

Created: 9 years ago by: Guest

Go to the latest result

createElement

cloneNode

Historical Performance Data aggregated from 383 community runs

Desktop Results:

Chrome 221 runs

Firefox 89 runs

Safari 15 runs

Other 7 runs

Mobile Results:

Chrome 27 runs

Safari 15 runs

Firefox 9 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`