Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
cloneNode vs createElement
(version: 0)
Comparing performance of:
cloneNode vs createElement
Created:
3 years ago
by:
Guest
Go to the latest result
Script Preparation code:
node = document.createElement('div');
Tests:
cloneNode
let newNode = node.cloneNode(true);
createElement
let newNode = document.createElement('div');
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
cloneNode
createElement
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
5 months ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Safari/537.36 Edg/145.0.0.0
Browser/OS:
Chrome 145 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=625767" width="100%" height="500px"></iframe>
createElement
12.8M/s
cloneNode
10.6M/s
View exact numbers
Test name
Executions per second
✓
createElement
12,843,602 Ops/sec
cloneNode
10,593,938 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the world of JavaScript microbenchmarks. **Benchmark Definition** The provided JSON represents a benchmark definition for measuring the performance difference between two approaches: cloning an existing node using `cloneNode` and creating a new element from scratch using `createElement`. The script preparation code is set to create a new `<div>` element, which will be used as a starting point for both tests. **Options Compared** Two options are being compared: 1. **cloneNode**: This method clones the entire content of the original node, including all its children and attributes. It's useful when you want to create a deep copy of an existing HTML element. 2. **createElement**: This method creates a new empty element and returns it. You then need to manually add children and attributes using methods like `appendChild` or `setAttribute`. **Pros and Cons** * **cloneNode**: + Pros: Creates a deep copy of the original node, preserving all its content and structure. + Cons: Can be slower than creating an empty element from scratch due to the overhead of copying data and attribute values. * **createElement**: + Pros: Faster than cloning an existing node, as it only requires setting up the new element's attributes and adding children. + Cons: Requires manual setup of attributes and children, which can be error-prone. **Library** None is explicitly mentioned in this benchmark. However, `document` is used to access HTML elements, indicating that the test assumes a standard DOM environment. **Special JS Feature or Syntax** There is no specific JavaScript feature or syntax being tested in this benchmark. It's purely focused on comparing the performance of two common approaches to creating new elements. **Other Alternatives** If you want to compare other methods for creating new elements, some alternatives could be: * Using a library like jQuery, which provides its own `clone` method. * Implementing your own custom cloning mechanism using JavaScript's built-in data structures and algorithms. * Using a library or framework that provides optimized element creation, such as React or Angular. Keep in mind that these alternatives might change the nature of the benchmark and are not directly comparable to the original `cloneNode` vs `createElement` test.
Related benchmarks
createElement vs cloneNode v3
createElement vs cloneNode vs cloneNode-lite
createElement vs deep cloneNode vs cloneNode
Create versus clone element
Comments
Confirm delete:
Do you really want to delete benchmark?