Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
innerHTML vs appendChild vs documentFragment
(version: 0)
Comparing performance of:
innerHTML vs appendChild vs documentFragment
Created:
2 years ago
by:
Registered User
Go 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);
appendChild
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); document.documentElement.appendChild(el);
documentFragment
const fg = 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'; fg.appendChild(heading); fg.appendChild(para1); fg.appendChild(para2); fg.appendChild(button); el.appendChild(fg); document.documentElement.appendChild(el);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
innerHTML
appendChild
documentFragment
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
10 months ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36 Edg/141.0.0.0
Browser/OS:
Chrome 141 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=618591" width="100%" height="500px"></iframe>
appendChild
339K/s
documentFragment
256K/s
innerHTML
54K/s
View exact numbers
Test name
Executions per second
✓
appendChild
339,354 Ops/sec
documentFragment
256,292 Ops/sec
innerHTML
53,849 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmark and explain what's being tested. **What is being tested?** The benchmark is comparing three ways to append content to an HTML element: 1. `innerHTML` 2. `appendChild` (appending a single element) 3. `documentFragment` These methods are used to add content to an HTML element, such as a `<div>` or another `<html>` element. **Options compared** The benchmark compares the performance of each method on three different browsers: * Firefox Mobile 118 * Android 13 mobile device Each browser's performance is measured in executions per second (ExecutionsPerSecond). **Pros and Cons of each approach:** 1. `innerHTML`: * Pros: simple, straightforward, and widely supported. * Cons: can be slow due to the DOM parsing required for validation and security checks. Also, it can cause issues with certain character encodings and text formatting. 2. `appendChild` (appending a single element): * Pros: generally faster than `innerHTML`, as it doesn't involve DOM parsing. However, it requires creating new elements and appending them individually, which can lead to more DOM nodes being created. * Cons: may be slower for complex structures or large amounts of data due to the overhead of creating multiple elements. 3. `documentFragment`: * Pros: faster than `innerHTML`, as it allows the browser to batch append elements together before updating the DOM. This can reduce the number of DOM updates, which can improve performance. * Cons: may require more effort to set up, especially for complex structures or large amounts of data. **Library and its purpose** In this benchmark, no specific JavaScript library is used beyond `document` and `HTMLElement`. However, `documentFragment` relies on the browser's built-in support for fragmenting HTML elements. **Special JS feature or syntax** There are no special JS features or syntax used in this benchmark. The test cases only use standard JavaScript features like `createElement`, `appendChild`, and `innerHTML`. **Other alternatives** If you're looking to optimize DOM manipulation, consider the following alternatives: * Use a virtual DOM library like React or Virtual DOM to batch updates and reduce unnecessary re-renders. * Employ a more efficient DOM manipulation technique, such as using `insertBefore` instead of `appendChild`. * Consider pre-rendering content using server-side rendering (SSR) or client-side rendering libraries. Keep in mind that the best approach will depend on your specific use case, application requirements, and performance constraints.
Related benchmarks
appendChild cycles vs documentFragment
DOMParser vs createContextualFragment vs innerHTML vs insertAdjacentHTML vs createContextualFragment Polyfill 2 Large HTML
replaceChild vs replaceChildren vs documentFragment 3
DOMParser vs template vs createContextualFragment vs innerHTML vs insertAdjacentHTML vs createContextualFragment Polyfill 2 Large HTM
DOMParser vs createContextualFragment vs innerHTML vs insertAdjacentHTML vs createContextualFragment Polyfill vs template vs template insertAdjacentHTML Large HTML
Comments
Confirm delete:
Do you really want to delete benchmark?