Benchmark: innerHTML 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);
DocumentFragment
const fragment = 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'; el.appendChild(heading); el.appendChild(para1); el.appendChild(para2); el.appendChild(button); fragment.appendChild(el); document.documentElement.appendChild(fragment);

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: one month ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Mobile Safari/537.36 EdgA/145.0.0.0

Browser/OS: Chrome Mobile 145 on Android

View result in a separate tab

Test name	Executions per second
innerHTML	26210.9 Ops/sec
DocumentFragment	62890.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of the provided benchmark.

**What is being tested?**

MeasureThat.net is testing the performance difference between two approaches: using `innerHTML` and using a `DocumentFragment`. In both cases, we're creating a HTML structure with multiple elements (a heading, two paragraphs, and a button) and appending it to the DOM.

**Options compared:**

There are two options being compared:

1. **innerHTML**: This approach involves setting the `innerHTML` property of an element directly. The innerHTML is set to a multiline string containing the HTML structure.
2. **DocumentFragment**: This approach involves creating a `DocumentFragment`, adding the HTML structure elements to it, and then appending the fragment to the DOM.

**Pros and Cons:**

1. **innerHTML**:
	* Pros:
		+ Simple and easy to use
		+ No need to create multiple elements individually
	* Cons:
		+ Can lead to slower performance due to the DOM tree restructuring required for each change
		+ Can cause issues with accessibility, as the browser must reparse the entire DOM tree
2. **DocumentFragment**:
	* Pros:
		+ Faster performance, as only the fragment needs to be appended to the DOM
		+ Reduces DOM tree restructuring and parsing overhead
	* Cons:
		+ Requires more code and a better understanding of DOM manipulation
		+ May not work well with older browsers or those that don't support `DocumentFragment`

**Library usage:**

None of the provided benchmark definitions explicitly use any libraries. However, it's worth noting that if you were to include a library like jQuery in one of your test cases, its overhead and complexity could impact performance.

**Special JS features/syntax:**

There is no special JavaScript feature or syntax being tested in this benchmark. The tests focus on the performance difference between using `innerHTML` versus a `DocumentFragment`.

**Other alternatives:**

If you're looking for alternative approaches to improve performance, consider:

1. **Use a virtual DOM**: Instead of manipulating the actual DOM, use a virtual DOM and only update it when necessary.
2. **Use a library like React or Angular**: These libraries provide optimized DOM manipulation and performance features out of the box.
3. **Use a caching mechanism**: Cache frequently accessed elements or data structures to reduce the overhead of repeated computations.

In summary, the benchmark is testing the performance difference between using `innerHTML` versus a `DocumentFragment`. The results indicate that using a `DocumentFragment` can lead to faster execution times. However, this approach requires more code and understanding of DOM manipulation, which may not be suitable for all use cases or skill levels.

Related benchmarks:

innerHTML vs DocumentFragment (version: 0)

Comparing performance of: innerHTML vs DocumentFragment

Created: 7 years ago by: Guest

Jump to the latest result

innerHTML

DocumentFragment

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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