Benchmark: innerHTML vs appendChild vs documentFragment

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>

Previous results

Test case name	Result
innerHTML
appendChild
documentFragment

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Android 13; Mobile; rv:109.0) Gecko/118.0 Firefox/118.0

Browser/OS: Firefox Mobile 118 on Android

View result in a separate tab

Test name	Executions per second
innerHTML	65425.1 Ops/sec
appendChild	65538.5 Ops/sec
documentFragment	39263.8 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):

LLMs can make mistakes. Check important info.

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:

innerHTML vs appendChild vs documentFragment (version: 0)

Comparing performance of: innerHTML vs appendChild vs documentFragment

Created: one year ago by: Registered User

Jump to the latest result

innerHTML

appendChild

documentFragment

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):