Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
createElement vs cloneNode vs cloneNode(false)
(version: 0)
Faster way to create new dom elements before insertion
Comparing performance of:
createElement vs cloneNode vs cloneNode(false)
Created:
6 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; }
cloneNode
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; }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
createElement
cloneNode
cloneNode(false)
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
9 months ago
)
User agent:
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36
Browser/OS:
Chrome 141 on Linux
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=619538" width="100%" height="500px"></iframe>
cloneNode(false)
40/s
cloneNode
40/s
createElement
39/s
View exact numbers
Test name
Executions per second
✓
cloneNode(false)
40 Ops/sec
cloneNode
40 Ops/sec
createElement
39 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**Benchmark Overview** The provided benchmark measures the performance of creating new DOM elements using three different approaches: `createElement`, `cloneNode(true)`, and `cloneNode(false)`. The goal is to determine which approach is faster for creating new DOM elements before insertion. **Options Compared** 1. **createElement**: Creates a new element from scratch. 2. **cloneNode(true)**: Clones the existing node, including all its attributes and child nodes. 3. **cloneNode(false)**: Clones the existing node, but only recursively clones its child nodes (does not copy attributes). **Pros and Cons of Each Approach** 1. **createElement**: * Pros: Faster for creating simple elements, as it doesn't involve cloning or copying attributes. * Cons: Slower for creating complex elements with many attributes, as it requires parsing and copying them. 2. **cloneNode(true)**: * Pros: Faster for creating complex elements, as it only involves cloning the existing node's content. * Cons: Slower for simple elements, as it involves cloning and copying all attributes and child nodes. 3. **cloneNode(false)**: * Pros: Balanced performance between simple and complex elements, as it only recursively clones child nodes. * Cons: May not be as fast as `createElement` for very simple elements. **Library Usage** None of the benchmark cases use a specific library, but they do rely on the browser's DOM API for creating and manipulating elements. **Special JS Features or Syntax** This benchmark does not explicitly use any special JavaScript features or syntax. However, it does demonstrate the differences in performance between various approaches to creating DOM elements. **Alternative Approaches** 1. **createElement() with attributes**: Creating an element using `createElement()` and then setting its attributes manually. 2. **innerHTML or outerHTML**: Using HTML strings to create elements, such as `document.createElement('div').innerHTML = '<p>Hello World!</p>'`. 3. **DOMParser**: Using the `DOMParser` API to parse HTML strings into DOM elements. These alternative approaches may be worth considering in specific use cases, but they may also introduce additional overhead or complexity compared to using `createElement()`, `cloneNode(true)`, and `cloneNode(false)` directly.
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?