Benchmark: innerHTML vs appendChild

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

Historical Performance Data aggregated from 14 community runs

Desktop Results:

Chrome 8 runs

DocumentFragment

68K/s

innerHTML

55K/s

Fastest: DocumentFragment (1.2x faster)

View exact numbers

✓ DocumentFragment: 68,061 ops/sec
• innerHTML: 54,984 ops/sec

Firefox 6 runs

innerHTML

101K/s

DocumentFragment

98K/s

View exact numbers

✓ innerHTML: 100,975 ops/sec
• DocumentFragment: 97,932 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML
DocumentFragment

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36

Browser/OS: Chrome 146 on Mac OS X 10.15.7

View result in a separate tab

innerHTML

96K/s

DocumentFragment

12K/s

View exact numbers

Test name	Executions per second
✓ innerHTML	95,988 Ops/sec
DocumentFragment	11,947 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Explanation**

The provided JSON represents two JavaScript microbenchmarks: `innerHTML` and `DocumentFragment`. These benchmarks compare the performance of two approaches to insert HTML content into a document.

**Options Compared**

1. **innerHTML**: This approach sets the innerHTML property of an element directly, which involves parsing the HTML string and appending it to the DOM tree.
2. **DocumentFragment**: This approach uses a DocumentFragment object to create a temporary container for the HTML content, which is then appended to the DOM tree.

**Pros and Cons**

1. **innerHTML**:
	* Pros: Simple and straightforward implementation.
	* Cons: Parsing the HTML string can be slow, especially for complex or large strings.
2. **DocumentFragment**:
	* Pros: Can improve performance by avoiding unnecessary DOM mutations, as the fragment is only appended to the DOM tree once.
	* Cons: Requires creating an extra object (the DocumentFragment) and may have additional overhead due to its creation.

**Other Considerations**

* The benchmark focuses on the performance difference between these two approaches, which is relevant for applications that need to handle large amounts of HTML content or require optimal rendering performance.
* However, in modern web development, using a virtual DOM (e.g., React's ReactDOM) can further optimize the rendering process by minimizing unnecessary DOM updates.

**Library and Special JS Features**

Neither of these benchmarks uses any external libraries or special JavaScript features. They are straightforward, vanilla JavaScript implementations that focus on the performance difference between two basic approaches to inserting HTML content into a document.

**Other Alternatives**

* **Virtual DOM**: Implementing a virtual DOM can further optimize rendering performance by minimizing unnecessary DOM updates.
* **Patch-based Rendering**: This approach involves updating only the parts of the DOM tree that need changing, rather than rebuilding the entire tree.

innerHTML vs appendChild (version: 0)

Comparing performance of: `innerHTML vs DocumentFragment`

Created: 5 years ago by: Guest

Go to the latest result

innerHTML

DocumentFragment

Historical Performance Data aggregated from 14 community runs

Desktop Results:

Chrome 8 runs

Firefox 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

innerHTML vs appendChild (version: 0)

Comparing performance of: innerHTML vs DocumentFragment

Created: 5 years ago by: Guest

Go to the latest result

innerHTML

DocumentFragment

Historical Performance Data aggregated from 14 community runs

Desktop Results:

Chrome 8 runs

Firefox 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `innerHTML vs DocumentFragment`