Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
createElement vs cloneNode with option and fragment
(version: 0)
Faster way to create new dom elements before insertion
Comparing performance of:
createElement vs cloneNode vs cloneNode fragment
Created:
4 years ago
by:
Guest
Go to the latest result
Tests:
createElement
var datalist = document.createElement('datalist') n = 0, node = document.createElement('option'); while(true) { n++; let o = document.createElement('option') o.value = n.toString() datalist.appendChild(o); if(n===5000) break; }
cloneNode
var datalist = document.createElement('datalist') n = 0, node = document.createElement('option'); while(true) { n++; let o = node.cloneNode(false) o.value = n.toString() datalist.appendChild(o); if(n===5000) break; }
cloneNode fragment
var f = new DocumentFragment() var datalist = document.createElement('datalist') n = 0, node = document.createElement('option'); while(true) { n++; let o = node.cloneNode(false) o.value = n.toString() f.appendChild(o); if(n===5000) break; } datalist.appendChild(f)
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
createElement
cloneNode
cloneNode fragment
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=621068" width="100%" height="500px"></iframe>
cloneNode
43/s
createElement
43/s
cloneNode fragment
40/s
View exact numbers
Test name
Executions per second
✓
cloneNode
43 Ops/sec
createElement
43 Ops/sec
cloneNode fragment
40 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmark and explain what's being tested. **Benchmark Definition:** The benchmark is designed to compare three approaches for creating new DOM elements: 1. `createElement`: Creating a new element using the `document.createElement()` method. 2. `cloneNode`: Cloning an existing element using the `node.cloneNode(false)` method, which creates a new copy of the node without cloning its child nodes. 3. `cloneNode fragment`: Using a `DocumentFragment` to create a new container for cloned elements. **Options Compared:** * In `createElement`, the only option is creating a new element using `document.createElement('datalist')`. * In `cloneNode`, the only option is cloning an existing element using `node.cloneNode(false)`. Note that this method creates a shallow copy of the node, without cloning its child nodes. * In `cloneNode fragment`, a new `DocumentFragment` is created and used to clone elements. This approach allows for more efficient cloning by avoiding the creation of unnecessary DOM nodes. **Pros and Cons:** * `createElement`: Simple and straightforward, but may lead to slower performance due to the overhead of creating a new element. * `cloneNode`: Faster than `createElement`, as it reuses existing node resources, but may be less efficient when dealing with large amounts of data or complex elements. This method can also lead to memory leaks if not used carefully. * `cloneNode fragment`: The most efficient approach, as it minimizes the creation of unnecessary DOM nodes and avoids potential memory issues. However, this method requires an additional step to append the cloned elements to a new container. **Library:** In all test cases, no specific library is used beyond the built-in JavaScript DOM API. However, some custom functions or variables (e.g., `n`, `node`, `o`) are defined within each benchmark definition. **Special JS Feature/Syntax:** None of the provided benchmark definitions rely on any special JavaScript features or syntax that would affect their execution or meaning. The code is straightforward and easily understandable by most software engineers. **Other Alternatives:** If you're interested in exploring alternative approaches for creating DOM elements, here are a few options: 1. **Template literals**: Using template literals (e.g., `<>`) to create new elements can be faster than the traditional `createElement` method. 2. **HTML templates**: Leveraging HTML templates (e.g., `<template>...</template>`) can provide an efficient way to generate DOM content, especially for large datasets. 3. **Libraries like LitElement or React**: Using libraries that abstract away the complexities of DOM manipulation and provide a more declarative approach to building user interfaces. Keep in mind that these alternatives may come with their own set of trade-offs, such as increased complexity or dependencies on external libraries.
Related benchmarks
createElement vs cloneNode(false)
createElement vs cloneNode v3
createElement vs deep cloneNode vs cloneNode
Comments
Confirm delete:
Do you really want to delete benchmark?