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);

​x
 
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);

 
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);

 
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

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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 7 months 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:

innerHTML
appendChild (appending a single element)
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:

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.
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.
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.

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