Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
createElement vs cloneNode vs innerHTML for multi elements with optimized loops
(version: 0)
Faster way to create new dom elements before insertion
Comparing performance of:
createElement vs cloneNode (deep) vs innerHTML
Created:
3 years ago
by:
Guest
Go to the latest result
Tests:
createElement
const list = []; let n = 0; const div = document.createElement('div'); const div2 = document.createElement('div'); const div3 = document.createElement('div'); const p = document.createElement('p'); div2.classList.add('two'); div3.classList.add('three'); p.classList.add('font-bold'); p.textContent = 'Hello!'; div.appendChild(div2); div2.appendChild(div3); div3.appendChild(p); console.log(div); while(true) { n++; list.push(div); if(n===100000) break; }
cloneNode (deep)
const list = []; let n = 0; const div = document.createElement('div'); const div2 = document.createElement('div'); const div3 = document.createElement('div'); const p = document.createElement('p'); div2.classList.add('two'); div3.classList.add('three'); p.classList.add('font-bold'); p.textContent = 'Hello!'; div.appendChild(div2); div2.appendChild(div3); div3.appendChild(p); while(true) { n++; list.push(div.cloneNode(true)); if(n===100000) break; }
innerHTML
const list = []; let n = 0; const div = document.createElement('div'); div.innerHTML = '<div><div class="two3"><div class="three"><p class="font-bold">Hello!</p></div></div></div>' console.log(div); while(true) { n++; list.push(div); 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 (deep)
innerHTML
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
4 months ago
)
User agent:
Mozilla/5.0 (X11; Linux x86_64; rv:145.0) Gecko/20100101 Firefox/145.0
Browser/OS:
Firefox 145 on Linux
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=626406" width="100%" height="500px"></iframe>
createElement
1K/s
innerHTML
1K/s
cloneNode (deep)
6/s
View exact numbers
Test name
Executions per second
✓
createElement
1,143 Ops/sec
innerHTML
1,133 Ops/sec
cloneNode (deep)
6 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the world of JavaScript microbenchmarks! **Benchmark Definition** The provided JSON represents a benchmark named "createElement vs cloneNode vs innerHTML for multi elements with optimized loops". This benchmark aims to measure which approach is faster when creating multiple DOM elements and appending them to an existing element. **Options Compared** There are three options being compared: 1. `createElement`: Creates new DOM elements using the `document.createElement()` method. 2. `cloneNode (deep)`: Clones existing DOM elements using the `cloneNode(true)` method, which creates a deep clone of the element. 3. `innerHTML`: Sets the inner HTML of an element using the `innerHTML` property. **Pros and Cons** * **createElement**: This approach is simple and efficient for creating new elements. However, it can be slower if the elements are complex or have many attributes. * **cloneNode (deep)**: Cloning existing elements can be faster than creating new ones, especially if the elements are relatively simple. However, it may also create a deep copy of the element's children, which can lead to increased memory usage and slower performance. * `innerHTML`: This approach is fast but may not work well with complex elements or attributes. **Library and Purpose** None are explicitly mentioned in this benchmark. **Special JS Feature or Syntax** There are no special JavaScript features or syntax used in this benchmark. It only relies on standard DOM APIs and JavaScript basics. **Other Alternatives** If you want to experiment with alternative approaches, here are some options: * Using `DocumentFragment` instead of `innerHTML` * Creating elements using a library like React or Angular * Using Web Workers to create elements in parallel However, these alternatives may not be relevant to this specific benchmark, and the focus is on comparing the three main approaches: `createElement`, `cloneNode (deep)`, and `innerHTML`. **Benchmark Preparation Code** The preparation code for this benchmark seems to be minimal, as it only creates some constants and an array. The actual benchmarking happens in the JavaScript code that defines each test case. Keep in mind that creating a realistic and representative benchmark often requires more setup and preparation. This benchmark might be oversimplified or not representative of real-world scenarios.
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?