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

Historical Performance Data aggregated from 42 community runs

Desktop Results:

Chrome 25 runs

DocumentFragment

106K/s

innerHTML

68K/s

Fastest: DocumentFragment (1.6x faster)

View exact numbers

✓ DocumentFragment: 106,493 ops/sec
• innerHTML: 68,296 ops/sec

Firefox 12 runs

innerHTML

147K/s

DocumentFragment

98K/s

Fastest: innerHTML (1.5x faster)

View exact numbers

✓ innerHTML: 147,084 ops/sec
• DocumentFragment: 98,180 ops/sec

Mobile Results:

Chrome 5 runs

DocumentFragment

68K/s

innerHTML

26K/s

Fastest: DocumentFragment (2.6x faster)

View exact numbers

✓ DocumentFragment: 67,887 ops/sec
• innerHTML: 26,275 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: 8 days ago)

User agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:109.0) Gecko/20100101 Firefox/116.0

Browser/OS: Firefox 116 on Windows 8.1

View result in a separate tab

innerHTML

135K/s

DocumentFragment

95K/s

View exact numbers

Test name	Executions per second
✓ innerHTML	135,237 Ops/sec
DocumentFragment	95,297 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.

innerHTML vs DocumentFragment (version: 0) Benchmark.js

Comparing performance of: `innerHTML vs DocumentFragment`

Created: 7 years ago by: Guest

Go to the latest result

innerHTML

DocumentFragment

Historical Performance Data aggregated from 42 community runs

Desktop Results:

Chrome 25 runs

Firefox 12 runs

Mobile Results:

Chrome 5 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 DocumentFragment (version: 0) Benchmark.js

Comparing performance of: innerHTML vs DocumentFragment

Created: 7 years ago by: Guest

Go to the latest result

innerHTML

DocumentFragment

Historical Performance Data aggregated from 42 community runs

Desktop Results:

Chrome 25 runs

Firefox 12 runs

Mobile Results:

Chrome 5 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`