Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
createElement vs cloneNode vs cloneNode-lite
(version: 0)
Faster way to create new dom elements before insertion
Comparing performance of:
createElement vs cloneNode vs cloneNode lite
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; }
cloneNode
var list = [], n = 0, node = document.createElement('div'); while(true) { n++; list.push(node.cloneNode(true)); if(n===100000) break; }
cloneNode lite
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 (3)
Previous results
Fork
Test case name
Result
createElement
cloneNode
cloneNode lite
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
8 months ago
)
User agent:
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36
Browser/OS:
Chrome 142 on Linux
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=621063" width="100%" height="500px"></iframe>
cloneNode lite
39/s
cloneNode
38/s
createElement
37/s
View exact numbers
Test name
Executions per second
✓
cloneNode lite
39 Ops/sec
cloneNode
38 Ops/sec
createElement
37 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the benchmark and its test cases. **Benchmark Overview** The benchmark measures the performance of three approaches to create new DOM elements: `createElement`, `cloneNode`, and `cloneNode lite`. The goal is to find the fastest way to create new DOM elements before insertion. **Options Compared** 1. **`createElement`**: Creates a new DOM element from scratch using the `document.createElement()` method. 2. **`cloneNode`**: Clones an existing DOM node using the `node.cloneNode(true)` method, which creates a deep copy of the original node. 3. **`cloneNode lite`**: A variant of `cloneNode` that only clones the node's child nodes, without creating a new container element. **Pros and Cons** * **`createElement`**: + Pros: Simple and efficient, no overhead from cloning an existing node. + Cons: Creates a new DOM element every time, which can be slower than cloning an existing node. * **`cloneNode`**: + Pros: Faster than creating a new DOM element, as it reuses the original node's resources. + Cons: Creates a deep copy of the original node, which can lead to memory issues if not handled properly. * **`cloneNode lite`**: + Pros: Balances between `createElement` and `cloneNode`, with less overhead than cloning an entire node. + Cons: May still create some unnecessary objects in the DOM tree. **Library Used** None, as these test cases do not rely on any external libraries. **Special JS Feature/Syntax** None mentioned explicitly. However, it's worth noting that the `cloneNode lite` approach relies on a specific implementation detail of the `cloneNode` method, which is only available in modern browsers (e.g., Firefox 89+). **Other Alternatives** If you're interested in exploring other approaches, here are some alternatives: * **Using a DOM library**: Some libraries like jQuery or React Native provide their own ways to create new DOM elements efficiently. * **Using WebAssembly**: You can compile your JavaScript code into WebAssembly (WASM) and execute it using the WASM runtime, which can provide better performance. * **Using a custom implementation**: Depending on your specific use case, you might be able to optimize the `createElement` and `cloneNode` methods by implementing them yourself in a way that's tailored to your needs. Keep in mind that these alternatives may require significant modifications to your codebase and might not provide the same level of performance as the benchmarked approaches.
Related benchmarks
createElement vs cloneNode(false)
createElement vs cloneNode v3
createElement vs deep cloneNode vs cloneNode
cloneNode vs createElement
Comments
Confirm delete:
Do you really want to delete benchmark?