Benchmark: createElement vs cloneNode shallow

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; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
createElement
cloneNode

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

**What is being tested?**

MeasureThat.net is testing the performance difference between two approaches to create new DOM elements:

1. **createElement**: Creating a new element using `document.createElement('div')`.
2. **cloneNode shallow**: Cloning an existing element using `node.cloneNode(true)` and pushing it into an array.

**Options compared**

The benchmark compares these two options:

* Creating a new element from scratch (`createElement`)
* Using `cloneNode` to create a copy of an existing element

**Pros and Cons of each approach:**

* **createElement**
	+ Pros:
		- No dependencies on other elements
		- Can be faster if the same type of element is created frequently
		- Allows for more control over the new element's properties
	+ Cons:
		- Requires allocating memory for a new element object
		- May have overhead due to DOM manipulation
* **cloneNode shallow**
	+ Pros:
		- Reuses existing element memory, reducing allocation and garbage collection overhead
		- Can be faster if cloning an existing element with similar properties is common
		- Avoids DOM manipulation overhead
	+ Cons:
		- Requires a reference to an existing element
		- May not work as expected if the cloned element's properties are modified

**Library used**

In this benchmark, `cloneNode` uses the W3C specification for cloning nodes. The `cloneNode` method creates a shallow clone of the original node, copying its child nodes and attributes, but not its event listeners or content.

**Special JavaScript feature or syntax**

There is no special JavaScript feature or syntax used in this benchmark. Both approaches are standard DOM manipulation techniques.

**Other alternatives**

Other ways to create new DOM elements include:

* Using a library like jQuery's `append` method, which creates a new element and appends it to the existing one
* Using a template engine like Mustache or Handlebars to generate HTML templates
* Using a custom rendering function to render HTML fragments

Keep in mind that these alternatives may have different performance characteristics and dependencies compared to the `createElement` and `cloneNode` approaches.

Latest run results:

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

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

Browser/OS: Edge 18.17763 on Windows

View result in a separate tab

Test name	Executions per second
createElement	13.9 Ops/sec
cloneNode	13.1 Ops/sec

Related benchmarks:

createElement vs cloneNode shallow (version: 0)

Faster way to create new dom elements before insertion

Comparing performance of: createElement vs cloneNode

Created: 4 years ago by: Guest

Jump to the latest result

createElement

cloneNode

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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