Benchmark: Clone node vs create element

Script Preparation code:

function createExample() {
  var el = document.createElement('div');
  el.className = 'class-1 class-2 class-3';
  el.id = 'example';
  el.textContent = 'Test';
  return el;
}

Tests:

Clone node
var clone = createExample(); var i = 1000; while (i--) { clone = clone.cloneNode(true); }
Create element
var el = createExample(); var i = 1000; while (i--) { el = createExample(); }

Historical Performance Data aggregated from 36 community runs

Desktop Results:

Chrome 24 runs

Clone node

2K/s

Create element

1K/s

Fastest: Clone node (1.6x faster)

View exact numbers

✓ Clone node: 2,161 ops/sec
• Create element: 1,320 ops/sec

Firefox 12 runs

Clone node

2K/s

Create element

911/s

Fastest: Clone node (1.8x faster)

View exact numbers

✓ Clone node: 1,621 ops/sec
• Create element: 911 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
Clone node
Create element

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 149 on Ubuntu

View result in a separate tab

Clone node

3K/s

Create element

2K/s

View exact numbers

Test name	Executions per second
✓ Clone node	3,148 Ops/sec
Create element	2,172 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 benchmark.

The provided JSON represents a JavaScript microbenchmark that compares two approaches: cloning an existing element and creating a new one from scratch. The benchmark is designed to measure the performance difference between these two methods.

**Options being compared:**

1. **Clone Node**: This approach involves calling the `cloneNode()` method on an existing HTML element, which creates a deep copy of the original element.
2. **Create Element**: This approach involves creating a new HTML element from scratch using the `createElement()` method and then setting its properties.

**Pros and Cons:**

* **Clone Node**:
	+ Pros:
		- Less memory allocation, as it reuses the existing element's resources.
		- Can be faster for large datasets, as it avoids creating a new element each time.
	+ Cons:
		- May not be suitable for all use cases, such as when the original element needs to be modified or replaced.
		- Can lead to performance issues if the cloned elements are not properly managed (e.g., not removed from the DOM).
* **Create Element**:
	+ Pros:
		- More flexible and easier to manage, as new elements can be created and modified independently of the original element.
		- Suitable for scenarios where the original element needs to be replaced or modified.
	+ Cons:
		- Requires more memory allocation, as a new element is created each time.
		- Can lead to performance issues if the number of created elements is high.

**Library:**

The `cloneNode()` method is an intrinsic JavaScript method that creates a deep copy of an existing element. It does not require any external libraries or dependencies.

There are no special JavaScript features or syntax used in this benchmark, as it focuses on demonstrating the performance difference between two common approaches to working with HTML elements.

**Other alternatives:**

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

* **Use a library like jQuery**: While not necessary for this benchmark, using a library like jQuery can simplify DOM manipulation and provide additional features. However, it may also introduce additional overhead and dependencies.
* **Consider using Web Workers or other parallel execution methods**: If the benchmark is running on a single-core CPU, using Web Workers or other parallel execution methods could help improve performance by leveraging multiple cores.

Overall, this benchmark provides a simple yet informative comparison of two common approaches to working with HTML elements in JavaScript.

Clone node vs create element (version: 1)

Compare cloning element vs creating a new one

Comparing performance of: `Clone node vs Create element`

Created: 7 years ago by: Registered User

Go to the latest result

Clone node

Create element

Historical Performance Data aggregated from 36 community runs

Desktop Results:

Chrome 24 runs

Firefox 12 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Clone node vs create element (version: 1)

Compare cloning element vs creating a new one

Comparing performance of: Clone node vs Create element

Created: 7 years ago by: Registered User

Go to the latest result

Clone node

Create element

Historical Performance Data aggregated from 36 community runs

Desktop Results:

Chrome 24 runs

Firefox 12 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: `Clone node vs Create element`