Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
createElement vs cloneNode vs innerHTML
(version: 0)
Faster way to create new dom elements before insertion
Comparing performance of:
createElement vs cloneNode (deep) vs innerHTML
Created:
5 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++; const div = document.createElement('div'); div.innerHTML = '<p class="font-bold">Hello!</p>'; 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:
one month ago
)
User agent:
Mozilla/5.0 (X11; Linux x86_64; rv:148.0) Gecko/20100101 Firefox/148.0
Browser/OS:
Firefox 148 on Linux
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=627307" width="100%" height="500px"></iframe>
Test name
Executions per second
createElement
12.3 Ops/sec
cloneNode (deep)
42.2 Ops/sec
innerHTML
13.2 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmarking setup and explanations. **Benchmark Overview** MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The goal is to compare different approaches for creating new DOM elements, specifically `createElement`, `cloneNode` (with deep cloning), and `innerHTML`. This comparison helps identify which method is faster for creating new DOM elements before insertion. **Library Used** In the benchmark setup, the `document.createElement()` function is used without any additional libraries. The `innerHTML` property is a built-in JavaScript feature that sets or gets the HTML content of an element. **Test Case Analysis** 1. **createElement**: In this test case, 100,000 DOM elements are created using `document.createElement('div')`. Each element has a child `p` element with class `font-bold` and text content 'Hello!'. This creates a nested structure. 2. **cloneNode (deep)**: Similar to the first test case, but instead of creating new elements directly, 100,000 clones are created using `cloneNode(true)`. The cloned elements are then added to an array for further processing. Note that this approach uses deep cloning, which creates a new copy of the entire DOM structure. 3. **innerHTML**: In this test case, 100,000 DOM elements are created by setting the `innerHTML` property of an empty `div` element to a string containing a child `p` element with class `font-bold` and text content 'Hello!'. The resulting elements are then added to an array. **Pros and Cons** * **createElement**: This method is fast, but it creates new elements from scratch. It may lead to memory leaks if not properly cleaned up. * **cloneNode (deep)**: Deep cloning can be slower than creating new elements directly, especially for large datasets. However, it ensures that the cloned structure is identical to the original and avoids potential memory issues with deeply nested objects. * **innerHTML**: This method is likely to be the slowest due to the overhead of parsing and compiling the HTML string into a DOM structure. **Other Considerations** * **Browser Support**: The benchmark results were obtained using Chrome 129, which might not be representative of other browsers. Different browsers may have varying performance characteristics for each test case. * **Device Platform**: The benchmark was run on a desktop platform, which may affect the results compared to mobile or tablet devices. **Alternatives** If you're interested in exploring alternative approaches, consider using: 1. **Template literals**: Instead of `innerHTML`, template literals (e.g., `const html = `<p class="font-bold">Hello!</p>``) can be used to create DOM elements more efficiently. 2. **Document fragment**: Using a `DocumentFragment` object (e.g., `const fragment = document.createDocumentFragment()`) can help reduce the overhead of creating and appending DOM elements. Keep in mind that these alternatives might not be directly comparable to the original benchmark test cases, as they may have different use cases or performance characteristics.
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?