Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
createElement vs cloneNode shallow
(version: 0)
Faster way to create new dom elements before insertion
Comparing performance of:
createElement vs cloneNode
Created:
6 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
var list = [], n = 0, node = document.createElement('div'); while(true) { n++; list.push(node.cloneNode(true)); if(n===100000) break; }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
createElement
cloneNode
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 difference between two approaches to create new DOM elements: 1. **createElement**: Creating a new element using `document.createElement('div')`. 2. **cloneNode shallow**: Cloning an existing element using `node.cloneNode(true)` and pushing it into an array. **Options compared** The benchmark compares these two options: * Creating a new element from scratch (`createElement`) * Using `cloneNode` to create a copy of an existing element **Pros and Cons of each approach:** * **createElement** + Pros: - No dependencies on other elements - Can be faster if the same type of element is created frequently - Allows for more control over the new element's properties + Cons: - Requires allocating memory for a new element object - May have overhead due to DOM manipulation * **cloneNode shallow** + Pros: - Reuses existing element memory, reducing allocation and garbage collection overhead - Can be faster if cloning an existing element with similar properties is common - Avoids DOM manipulation overhead + Cons: - Requires a reference to an existing element - May not work as expected if the cloned element's properties are modified **Library used** In this benchmark, `cloneNode` uses the W3C specification for cloning nodes. The `cloneNode` method creates a shallow clone of the original node, copying its child nodes and attributes, but not its event listeners or content. **Special JavaScript feature or syntax** There is no special JavaScript feature or syntax used in this benchmark. Both approaches are standard DOM manipulation techniques. **Other alternatives** Other ways to create new DOM elements include: * Using a library like jQuery's `append` method, which creates a new element and appends it to the existing one * Using a template engine like Mustache or Handlebars to generate HTML templates * Using a custom rendering function to render HTML fragments Keep in mind that these alternatives may have different performance characteristics and dependencies compared to the `createElement` and `cloneNode` approaches.
Related benchmarks:
createElement vs cloneNode shallow2
createElement vs cloneNode(false)
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?