Benchmark: createElement vs deep cloneNode vs cloneNode

Tests:

createElement
var list = [], n = 0; while(true) { n++; list.push(document.createElement('div')); if(n===100000) break; }
deep cloneNode
var list = [], n = 0, node = document.createElement('div'); while(true) { n++; list.push(node.cloneNode(true)); if(n===100000) break; }
cloneNode
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

Test case name	Result
createElement
deep cloneNode
cloneNode

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:148.0) Gecko/20100101 Firefox/148.0

Browser/OS: Firefox 148 on Linux

View result in a separate tab

Test name	Executions per second
createElement	70.2 Ops/sec
deep cloneNode	131.5 Ops/sec
cloneNode	133.5 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 tested on MeasureThat.net?**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks to compare the performance of different approaches in creating new DOM elements.

In this specific benchmark, three test cases are compared:

1. `createElement`: This approach creates a new DOM element using the `document.createElement()` method.
2. `deep cloneNode`: This approach clones an existing DOM node using the `cloneNode(true)` method to create a deep copy of the node.
3. `cloneNode`: This approach also clones an existing DOM node, but without the `true` parameter in `cloneNode()`, which only creates a shallow copy.

**Options compared**

The three test cases compare different approaches to creating new DOM elements:

* `createElement`: Creates a new element from scratch using `document.createElement()`.
* `deep cloneNode`: Clones an existing node and returns a deep copy of it.
* `cloneNode`: Clones an existing node, but only creates a shallow copy.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

1. **createElement**:
	* Pros: Fastest performance, as it doesn't require cloning an existing element.
	* Cons: Requires more memory, as a new element is created from scratch.
2. **deep cloneNode**:
	* Pros: Creates a deep copy of the node, which can be useful for certain use cases (e.g., preserving complex node structures).
	* Cons: Slower performance due to the cloning process.
3. **cloneNode**:
	* Pros: Faster performance than `deep cloneNode`, as it only creates a shallow copy.
	* Cons: May not preserve complex node structures or attributes.

**Library and purpose**

None of these approaches rely on any specific JavaScript library. They are built-in DOM methods that are available in most browsers.

**Special JS feature or syntax**

There is no special JS feature or syntax used in this benchmark. The focus is solely on comparing the performance of different approaches to creating new DOM elements.

**Other alternatives**

If you're interested in exploring alternative approaches, here are a few options:

* Using `Element.prototype.slice()` to create a new element: This approach creates a new element by slicing an existing one.
* Using a library like jQuery's `$().html()` method: This approach clones an existing element and replaces its contents with new ones.

Keep in mind that these alternatives may have different performance characteristics compared to the approaches tested on MeasureThat.net.

Related benchmarks:

createElement vs deep cloneNode vs cloneNode (version: 0)

Faster way to create new dom elements before insertion

Comparing performance of: createElement vs deep cloneNode vs cloneNode

Created: 4 years ago by: Guest

Jump to the latest result

createElement

deep cloneNode

cloneNode

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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