Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
clone vs innerHTML
(version: 0)
tes
Comparing performance of:
inner vs clone
Created:
3 years ago
by:
Guest
Jump to the latest result
Tests:
inner
const paren = document.createElement('div'); let n = 0; let str= ""; while(true) { n++; str += '<div><p class="font-bold">Hello!</p></div>'; if(n===100000) break; } paren.innerHTML = str;
clone
const paren = document.createElement('div'); 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++; paren.appendChild(div.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
inner
clone
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):
Let's break down the provided benchmark and explain what's being tested, compared options, pros and cons, and other considerations. **Benchmark Overview** The benchmark is designed to compare two approaches for building HTML content: using `innerHTML` or cloning elements and appending them. The test cases are: 1. **`clone`**: This test case uses the `cloneNode(true)` method to create a copy of an element and then appends it to another element. 2. **`inner`**: This test case sets the `innerHTML` property directly on an element. **Comparison Options** The benchmark is comparing two approaches: 1. **`clone`**: Using the `cloneNode(true)` method to create a copy of an element and appending it to another element. 2. **`inner`**: Setting the `innerHTML` property directly on an element. **Pros and Cons** **`clone` approach:** Pros: * Can be more efficient for large amounts of data, as it avoids creating multiple DOM elements with identical content. * Allows for easier manipulation of the cloned elements (e.g., adding or removing classes). Cons: * Can lead to performance issues if the cloned elements are not properly garbage collected, as they can still occupy memory even after being removed from the DOM. * May cause unexpected behavior if the cloned elements are not properly styled or laid out. **`inner` approach:** Pros: * Simplifies the process of setting HTML content on an element. * Can be faster for small amounts of data, as it avoids creating temporary elements and cloning them. Cons: * Can lead to performance issues when dealing with large amounts of data, as it can cause the browser to render multiple DOM elements with identical content. * Can result in unexpected behavior if the `innerHTML` property is not properly sanitized or escaped. **Library Used** In this benchmark, there is no explicit library being used beyond the standard JavaScript API (e.g., `document.createElement`, `cloneNode`). However, some modern browsers may use various optimizations or features that could potentially affect the results of this benchmark. **Special JS Features or Syntax** There are no special JavaScript features or syntax being used in these test cases. The code is straightforward and uses standard JavaScript constructs. **Other Considerations** * Memory usage: The `clone` approach can lead to higher memory usage if not properly garbage collected, while the `inner` approach may use less memory for small amounts of data. * Rendering performance: The `clone` approach may be faster for large amounts of data, as it avoids creating multiple DOM elements with identical content. However, the `inner` approach may still render faster for small amounts of data. **Alternatives** If you're interested in exploring alternative approaches or optimizations for building HTML content, here are a few options: * **Use template literals**: Instead of concatenating strings using `innerHTML`, consider using template literals to build your HTML content. This can provide better performance and readability. * **Use a DOM library**: Libraries like React or Vue.js provide optimized solutions for building and manipulating DOM elements, which may offer better performance than the standard JavaScript API. * **Optimize cloning**: If you do need to use the `cloneNode` approach, consider optimizing it by using techniques like caching cloned elements or using Web Workers to perform cloning in parallel.
Related benchmarks:
createTextNode vs innerHTML vs innerText
createElement vs cloneNode v3
innerHTML vs replaceChildren() vs removeChild()|appendChild(cloneNode())
cloneNode vs createElement
Create versus clone element
Comments
Confirm delete:
Do you really want to delete benchmark?