Benchmark: createElement vs cloneNode(false)

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(false)); if(n===100000) break; }

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

createElement

104/s

cloneNode

70/s

Fastest: createElement (1.5x faster)

View exact numbers

✓ createElement: 104 ops/sec
• cloneNode: 70 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: 8 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36

Browser/OS: Chrome 142 on Linux

View result in a separate tab

cloneNode

39/s

createElement

39/s

View exact numbers

Test name	Executions per second
✓ cloneNode	39 Ops/sec
createElement	39 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!

**What is being tested?**

The provided JSON represents a benchmark that compares two approaches to create new DOM elements:

1. `createElement` method, which creates a new element by calling `document.createElement('div')`.
2. `cloneNode(false)` method, which clones an existing element and then returns the cloned node.

**Options compared:**

Two options are being compared:

* **Creating a new element from scratch using `createElement`:**
	+ Pros:
		- Creates a completely new DOM element with no inheritance or context.
		- Can be faster for complex elements or those requiring custom attributes.
	+ Cons:
		- May result in more memory usage due to the creation of an entirely new object.
		- Can lead to unnecessary overhead if not necessary.
* **Cloning an existing element using `cloneNode(false)`:**
	+ Pros:
		- Reuses an existing DOM element, potentially reducing memory usage.
		- Avoids unnecessary overhead associated with creating a new element from scratch.
	+ Cons:
		- Creates a new DOM element that is not the original, which may lead to unexpected behavior.
		- May be slower for complex elements or those requiring custom attributes.

**Library and its purpose:**

The `cloneNode(false)` method is a built-in method in JavaScript's DOM API. It takes an existing element as an argument and returns a deep copy of that element, excluding any event listeners. The `false` parameter specifies whether to perform a shallow or deep clone. In this benchmark, it's used with `false`, indicating a deep clone.

**Special JS feature or syntax:**

There is no special JavaScript feature or syntax being tested in this benchmark. It solely relies on standard JavaScript and DOM APIs.

**Other alternatives:**

For creating new DOM elements, alternative approaches could include:

1. **DOMParser**: Can parse HTML strings to create new DOM elements.
2. **DocumentFragment**: A lightweight container for grouping DOM nodes; can be used to create new elements or update existing ones.
3. **template literals**: Can generate HTML strings and then use `document.createElement` to create new elements.

Keep in mind that the choice of approach depends on specific requirements, such as performance, memory usage, or desired behavior.

**Benchmark preparation code:**

The provided JSON does not include any script preparation code, but it's likely that some basic setup is necessary before running the benchmark, such as initializing variables or importing libraries. The `Html Preparation Code` field is also empty, suggesting that no specific HTML structure is being used for this benchmark.

I hope this explanation helps you understand what's being tested in this JavaScript microbenchmark!

createElement vs cloneNode(false) (version: 0)

Faster way to create new dom elements before insertion

Comparing performance of: `createElement vs cloneNode`

Created: 6 years ago by: Guest

Go to the latest result

createElement

cloneNode

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 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(false) (version: 0)

Faster way to create new dom elements before insertion

Comparing performance of: createElement vs cloneNode

Created: 6 years ago by: Guest

Go to the latest result

createElement

cloneNode

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 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`