Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
createElement vs cloneNode for comments
(version: 0)
Faster way to create new dom elements before insertion
Comparing performance of:
createElement vs cloneNode
Created:
2 years ago
by:
Registered User
Go to the latest result
Tests:
createElement
var list = [], n = 0; while(true) { n++; list.push(document.createComment(' ')); if(n===100000) break; }
cloneNode
var list = [], n = 0, node = document.createComment(' '); 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:
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/120.0.0.0 Safari/537.36
Browser/OS:
Chrome 120 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=497981" width="100%" height="500px"></iframe>
cloneNode
87/s
createElement
19/s
View exact numbers
Test name
Executions per second
✓
cloneNode
87 Ops/sec
createElement
19 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmark JSON and explain what's being tested, compared, and discussed. **Benchmark Purpose:** The primary goal of this benchmark is to compare two approaches for creating new DOM elements: 1. `document.createElement()` (createElement) 2. `node.cloneNode(true)` (cloneNode) **Options Compared:** * **createElement**: Creates a new DOM element using the `document.createElement()` method. + Pros: Can be used to create custom HTML elements, allows for more control over the element's attributes and content. + Cons: May incur overhead due to parsing and serializing the element's properties. * **cloneNode**: Creates a copy of an existing node (in this case, a comment) using the `node.cloneNode(true)` method. + Pros: Faster and more lightweight than creating from scratch, as it reuses the existing node's attributes and content. + Cons: Only creates a shallow copy, so modifying the cloned node would affect the original. **Library Used:** None (this benchmark is focused on basic DOM manipulation operations). **Special JS Features/Syntax:** The benchmark uses JavaScript loops (`while`) to create and push elements or clones into an array. This is not a special feature or syntax per se, but rather a simple way to generate large datasets for testing. Now, let's examine the test cases: 1. **createElement**: Creates 100,000 new comment elements using `document.createElement()`. 2. **cloneNode**: Creates 100,000 clones of an existing comment element ( created initially with `document.createComment('')` ) using `node.cloneNode(true)`. **Benchmark Results:** The latest benchmark results show that the `cloneNode` approach is significantly faster than creating elements from scratch (`createElement`). The exact times are not provided, but the results suggest a substantial difference in performance between the two methods. **Other Alternatives:** * **Other DOM element creation methods**: Depending on the use case, other approaches might be more suitable, such as using `document Fragments` or `DocumentBuilderFactory`. * **Using existing nodes**: Creating elements from an existing node (e.g., a fragment) can be faster and more efficient than creating new nodes. * **Avoiding unnecessary cloning**: If the cloned nodes are not modified, there's no need to create clones at all.
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?