Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
innerHTML vs DocumentFragment
(version: 0)
Comparing performance of:
innerHTML vs DocumentFragment
Created:
7 years ago
by:
Guest
Jump to the latest result
Tests:
innerHTML
const el = document.createElement('div'); el.innerHTML = ` <h1>Heading</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> <button>Button</button> `; document.documentElement.appendChild(el);
DocumentFragment
const fragment = document.createDocumentFragment(); const el = document.createElement('div'); const heading = document.createElement('h1'); const para1 = document.createElement('p'); const para2 = document.createElement('p'); const button = document.createElement('button'); heading.innerText = 'Heading'; para1.innerText = 'Paragraph 1'; para2.innerText = 'Paragraph 2'; button.innerText = 'Button'; el.appendChild(heading); el.appendChild(para1); el.appendChild(para2); el.appendChild(button); fragment.appendChild(el); document.documentElement.appendChild(fragment);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
innerHTML
DocumentFragment
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one month ago
)
User agent:
Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Mobile Safari/537.36 EdgA/145.0.0.0
Browser/OS:
Chrome Mobile 145 on Android
View result in a separate tab
Embed
Embed Benchmark Result
Test name
Executions per second
innerHTML
26210.9 Ops/sec
DocumentFragment
62890.8 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the explanation of the provided benchmark. **What is being tested?** MeasureThat.net is testing the performance difference between two approaches: using `innerHTML` and using a `DocumentFragment`. In both cases, we're creating a HTML structure with multiple elements (a heading, two paragraphs, and a button) and appending it to the DOM. **Options compared:** There are two options being compared: 1. **innerHTML**: This approach involves setting the `innerHTML` property of an element directly. The innerHTML is set to a multiline string containing the HTML structure. 2. **DocumentFragment**: This approach involves creating a `DocumentFragment`, adding the HTML structure elements to it, and then appending the fragment to the DOM. **Pros and Cons:** 1. **innerHTML**: * Pros: + Simple and easy to use + No need to create multiple elements individually * Cons: + Can lead to slower performance due to the DOM tree restructuring required for each change + Can cause issues with accessibility, as the browser must reparse the entire DOM tree 2. **DocumentFragment**: * Pros: + Faster performance, as only the fragment needs to be appended to the DOM + Reduces DOM tree restructuring and parsing overhead * Cons: + Requires more code and a better understanding of DOM manipulation + May not work well with older browsers or those that don't support `DocumentFragment` **Library usage:** None of the provided benchmark definitions explicitly use any libraries. However, it's worth noting that if you were to include a library like jQuery in one of your test cases, its overhead and complexity could impact performance. **Special JS features/syntax:** There is no special JavaScript feature or syntax being tested in this benchmark. The tests focus on the performance difference between using `innerHTML` versus a `DocumentFragment`. **Other alternatives:** If you're looking for alternative approaches to improve performance, consider: 1. **Use a virtual DOM**: Instead of manipulating the actual DOM, use a virtual DOM and only update it when necessary. 2. **Use a library like React or Angular**: These libraries provide optimized DOM manipulation and performance features out of the box. 3. **Use a caching mechanism**: Cache frequently accessed elements or data structures to reduce the overhead of repeated computations. In summary, the benchmark is testing the performance difference between using `innerHTML` versus a `DocumentFragment`. The results indicate that using a `DocumentFragment` can lead to faster execution times. However, this approach requires more code and understanding of DOM manipulation, which may not be suitable for all use cases or skill levels.
Related benchmarks:
createTextNode vs innerHTML vs innerText
innerText vs innerHtml
createTextNode vs textContent vs innerText vs innerHTML (for reading)
innerText vs innerHTML (performance 3)
innerText vs innerHTML vs textContent
Comments
Confirm delete:
Do you really want to delete benchmark?