Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
createElement vs cloneNode333
(version: 0)
Faster way to create new dom elements before insertion
Comparing performance of:
createElement vs cloneNode
Created:
2 years ago
by:
Guest
Go to the latest result
Tests:
createElement
var list = []; let n = 0; while (++n != 100_000) { list.push(document.createElement("div")); }
cloneNode
var list = []; let n = 0; const node = document.createElement("img"); node.style.width = "24px"; while (++n != 100_000) { list.push(node.cloneNode()); }
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:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36
Browser/OS:
Chrome 126 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=532651" width="100%" height="500px"></iframe>
createElement
20/s
cloneNode
14/s
View exact numbers
Test name
Executions per second
✓
createElement
20 Ops/sec
cloneNode
14 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
I'll break down the benchmark test and its options for you. **Benchmark Test Overview** The test compares two approaches to create new DOM elements: 1. `createElement`: Creating a new DOM element using the `document.createElement()` method. 2. `cloneNode`: Cloning an existing DOM element using the `cloneNode()` method, rather than creating a new one. **What is tested?** In this test, we're interested in determining which approach is faster for creating a large number of new DOM elements (100,000 in this case) before insertion into the document. The benchmark aims to measure the performance difference between these two approaches. **Options Compared** There are only two options being compared: 1. `createElement`: Creates a new DOM element from scratch. 2. `cloneNode`: Clones an existing DOM element to create a new one. **Pros and Cons of each approach:** * **createElement**: + Pros: - Faster, as it doesn't require cloning an existing element. - More flexible, as you can set properties directly on the newly created element. + Cons: - Requires more memory, as a new DOM element is created from scratch. - May lead to slower performance if not optimized properly. * **cloneNode**: + Pros: - Faster for large numbers of elements, as cloning is generally faster than creating from scratch. - More memory-efficient, as only the cloned element's contents are copied, not the entire element. + Cons: - Requires an existing DOM element to clone, which may not be available in all situations. - Less flexible, as you're working with a copy of the original element. **Library: None** There is no library being used in this benchmark test. The `document` object and standard JavaScript methods (`createElement`, `cloneNode`) are being used to compare the performance of these two approaches. **Special JS feature or syntax: None** This benchmark doesn't rely on any special JavaScript features or syntax, so it's accessible to developers with varying levels of knowledge. **Other alternatives** If you were to add more options to this benchmark, some alternative approaches could be: * Using a library like jQuery or a DOM manipulation framework (e.g., React) that provides optimized methods for creating and managing DOM elements. * Using Web Workers or other parallel processing techniques to create new elements in the background while still executing on the main thread. * Comparing the performance of different rendering engines or browser versions using a benchmarking framework like WebGL or Metal. These alternatives would allow you to explore additional aspects of performance optimization, but they're not part of this specific benchmark test.
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?