Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
weweewdwr41
(version: 0)
Compare cloning element vs creating a new one
Comparing performance of:
C1 vs C2
Created:
2 years ago
by:
Guest
Go to the latest result
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:
C1
var scope = { ex: createExample() } var i = 10000; while (i--) { var e = scope.ex.cloneNode(true); }
C2
var scope = { ex: createExample() } scope.Clone = Node.prototype.cloneNode.bind(scope.ex); var i = 10000; while (i--) { var e = scope.Clone(true); }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
C1
C2
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36
Browser/OS:
Chrome 126 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=532799" width="100%" height="500px"></iframe>
C1
251/s
C2
240/s
View exact numbers
Test name
Executions per second
✓
C1
251 Ops/sec
C2
240 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down what's being tested in this benchmark. The benchmark is comparing two approaches to clone an HTML element: 1. **Cloning using `cloneNode`**: This approach uses the `cloneNode` method on the original element (`scope.ex`) and passes `true` as an argument, which means the cloned node will be a deep clone (i.e., it will include all the child nodes). 2. **Creating a new instance of the element's prototype**: This approach creates a new instance of the same type of element (e.g., `div`) using the `Node.prototype.cloneNode` method, bound to the original element (`scope.ex`). The cloned node is created by calling `cloneNode` on this new instance, passing `true` as an argument for a deep clone. **Pros and Cons:** * **Cloning using `cloneNode`**: Pros: + Faster, since it's a built-in method that can be optimized by the browser. + Easier to implement, as it's a single line of code. * Cons: + Can create large amounts of garbage if not properly cleaned up, leading to memory issues. + May not work correctly for all types of elements (e.g., some custom elements). * **Creating a new instance of the element's prototype**: Pros: + More control over the cloning process, allowing for more flexibility and customization. + Can be safer than `cloneNode`, as it avoids creating unnecessary garbage. * Cons: + Slower, since it involves creating a new object instance. + Requires more code and setup. **Library usage:** None of the provided benchmark definitions use any external libraries. However, if we were to analyze the HTML preparation code (`createExample` function), it's clear that this is a custom JavaScript function that returns an element with some attributes and text content. **Special JS features or syntax:** There are no special JavaScript features or syntax used in these benchmark definitions. They're straightforward examples of cloning elements using built-in methods or creating new instances of the element's prototype. The results provided show that Chrome 126, running on a Mac OS X 10.15.7 desktop device, performed slightly better (slightly faster executions per second) for the `C1` benchmark, which uses the `cloneNode` method. **Alternatives:** If you're looking for alternative approaches to cloning elements or optimizing this process, here are some options: * Using a library like jQuery's `clone()` method * Implementing a custom cloning mechanism using Web Workers or WebAssembly * Using a different approach, such as serializing the element's attributes and creating a new element with those values Keep in mind that the best approach will depend on your specific use case and requirements.
Related benchmarks
Clone node vs create element
cloneNode vs createElement
Create versus clone element
weweewdwr4
Comments
Confirm delete:
Do you really want to delete benchmark?