Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
createElement vs cloneNode vs innerHTML (Apua)
(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
Jump to the latest result
Tests:
createElement
const list = []; let n = 0; while(true) { n++; const div = document.createElement('div'); const p = document.createElement('p'); p.classList.add('font-bold'); p.textContent = 'Hello!'; div.appendChild(p); list.push(div); if(n===100000) break; }
cloneNode (deep)
const list = []; let n = 0; const div = document.createElement('div'); const p = document.createElement('p'); p.classList.add('font-bold'); p.textContent = 'Hello!'; div.appendChild(p); while(true) { n++; list.push(div.cloneNode(true)); if(n===100000) break; }
innerHTML
const list = []; let n = 0; while(true) { n++; list.push('<p class="font-bold">Hello!</p>'); if(n===100000) break; } const div = document.createElement('div'); div.innerHTML = list.join()
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:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**What is being tested?** MeasureThat.net is testing the performance of three different methods to create new DOM elements: `createElement`, `cloneNode` (both shallow and deep), and `innerHTML`. The benchmark specifically focuses on creating multiple DOM elements and then appending them to another element. The tests are designed to measure which method is the fastest. **Options being compared** There are two main approaches: 1. **`createElement`**: Creating a new DOM element from scratch using the `document.createElement()` method. 2. **`cloneNode` (deep)**: Cloning an existing DOM element and then appending it to another element using the `cloneNode(true)` method. 3. **`innerHTML`**: Setting the inner HTML of an element using the `innerHTML` property. **Pros and Cons** * **`createElement`**: + Pros: Simple, fast, and flexible. It allows for customization of the created elements. + Cons: Can be slower than other methods if the same elements are reused multiple times (e.g., due to DOM mutation). * **`cloneNode` (deep)**: + Pros: Faster than `createElement` when creating many similar elements. Reduces DOM mutations and improves performance for dynamic content updates. + Cons: Creates a new copy of the original element, which can lead to increased memory usage. * **`innerHTML`**: + Pros: Fastest method for simple HTML templates. Eliminates the need for DOM creation and manipulation. + Cons: Less flexible than `createElement` and may not be suitable for complex DOM structures. **Library/Features being used** In this benchmark, the following JavaScript libraries are not explicitly mentioned: However, it's worth noting that some modern browsers and JavaScript engines may use various features like Web Workers or SIMD (Single Instruction, Multiple Data) to improve performance in web applications. **Special JS feature/syntax** The `cloneNode(true)` method is used in one of the benchmark tests. This method creates a deep clone of an existing DOM element, which can be useful for creating multiple copies of an element with the same attributes and content. Overall, this benchmark provides insight into the performance differences between three common methods for creating new DOM elements, allowing developers to make informed decisions about their web application's performance optimization strategies.
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?