Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
createElement vs cloneNode 1337
(version: 0)
Faster way to create new dom elements before insertion
Comparing performance of:
createElement vs cloneNode true vs cloneNode false vs cloneNode no params
Created:
4 years ago
by:
Guest
Jump to the latest result
Tests:
createElement
var list = [], n = 0; while(true) { n++; list.push(document.createElement('div')); if(n===100000) break; }
cloneNode true
var list = [], n = 0, node = document.createElement('div'); while(true) { n++; list.push(node.cloneNode(true)); if(n===100000) break; }
cloneNode false
var list = [], n = 0, node = document.createElement('div'); while(true) { n++; list.push(node.cloneNode(false)); if(n===100000) break; }
cloneNode no params
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 (4)
Previous results
Fork
Test case name
Result
createElement
cloneNode true
cloneNode false
cloneNode no params
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**What is being tested?** MeasureThat.net is testing the performance of two approaches for creating new DOM elements: `createElement` and `cloneNode`. The benchmark simulates creating 100,000 new DOM elements using each approach. **Options compared** The options being compared are: 1. **createElement**: Creating a new DOM element from scratch using `document.createElement('div')`. 2. **cloneNode (with no parameters)**: Cloning an existing DOM element using `node.cloneNode()` without specifying any parameters. 3. **cloneNode (with false parameter)**: Cloning an existing DOM element using `node.cloneNode(false)`. This approach uses a shallow clone, which only copies the element's attributes and not its child nodes. 4. **cloneNode (with true parameter)**: Cloning an existing DOM element using `node.cloneNode(true)`. This approach uses a deep clone, which recursively copies all child nodes. **Pros and Cons of each approach** 1. **createElement**: * Pros: Can be faster for very large numbers of elements, as it doesn't rely on the original element's structure. * Cons: Requires creating a new DOM element from scratch, which can lead to memory issues if not handled properly. 2. **cloneNode (with no parameters)**: * Pros: Quick and efficient, as it only requires cloning the existing element without modifying its structure. * Cons: May be slower for large numbers of elements, as it relies on the original element's structure. 3. **cloneNode (with false parameter)**: * Pros: Faster than `cloneNode` with no parameters for small to medium-sized datasets. * Cons: Only works for shallow clones and may not preserve some attributes or child nodes. 4. **cloneNode (with true parameter)**: * Pros: Preserves the original element's structure and child nodes, making it suitable for more complex cloning scenarios. * Cons: May be slower than `cloneNode` with no parameters due to its deeper cloning process. **Library used** The benchmark uses the `document.createElement()` and `Element.prototype.cloneNode()` methods, which are built-in DOM API functions in modern browsers. **Special JS feature/syntax** None mentioned.
Related benchmarks:
createElement vs cloneNode(false)
createElement vs cloneNode()
createElement vs cloneNode v3
createElement vs cloneNode vs cloneNode-lite
createElement vs deep cloneNode vs cloneNode
Comments
Confirm delete:
Do you really want to delete benchmark?