Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
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:
5 years ago
by:
Guest
Go to the latest result
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>
Run tests (3)
Previous results
Fork
Test case name
Result
createElement
deep cloneNode
cloneNode
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
4 months 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
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=627120" width="100%" height="500px"></iframe>
cloneNode
133/s
deep cloneNode
132/s
createElement
70/s
View exact numbers
Test name
Executions per second
✓
cloneNode
133 Ops/sec
deep cloneNode
132 Ops/sec
createElement
70 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
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 cloneNode(false)
createElement vs cloneNode v3
createElement vs cloneNode vs cloneNode-lite
cloneNode vs createElement
Comments
Confirm delete:
Do you really want to delete benchmark?