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

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: 7 days ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Browser/OS: Chrome 135 on Windows

View result in a separate tab

Test name	Executions per second
innerHTML	116090.7 Ops/sec
DocumentFragment	422233.7 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months 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.

Related benchmarks:

innerHTML vs appendChild (version: 0)

Comparing performance of: innerHTML vs DocumentFragment

Created: 4 years ago by: Guest

Jump to the latest result

innerHTML

DocumentFragment

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):