Benchmark: Large data Performance: innerHTML vs DocumentFragment

HTML Preparation code:

<div id="viewer"></div>

Tests:

innerHTML
const lines = 50000; let data = ''; for(let i = 0; i<=lines; i++) { data += `<div class="row"><span id="line-${i}">${i}</span><span>Foo Bar ${i}</span></div>` } const el = document.getElementById('viewer'); el.innerHTML = data;
DocumentFragment
const lines = 50000; let data = ''; for(let i = 0; i<=lines; i++) { data += `<div class="row"><span id="line-${lines[i]}">${lines[i]}</span><span>Foo Bar ${lines[i]}</span></div>` } const fragment = document.createDocumentFragment(); const wrapper = document.createElement('div'); const el = document.getElementById('viewer'); wrapper.innerHTML = data.html; fragment.appendChild(wrapper); el.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: 5 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:144.0) Gecko/20100101 Firefox/144.0

Browser/OS: Firefox 144 on Linux

View result in a separate tab

Test name	Executions per second
innerHTML	4.5 Ops/sec
DocumentFragment	74.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided JSON represents two benchmark cases, each comparing the performance of two different approaches: `innerHTML` and `DocumentFragment`.

**Tested Options**

The two test cases compare the performance of:

1. **innerHTML**: This approach appends HTML content to an element's `innerHTML` property. It is a simple and widely used method for updating the content of an HTML document.
2. **DocumentFragment**: This approach creates a new fragment, appends the HTML content to it, and then appends the fragment to another element (`wrapper`). This approach can be more efficient than `innerHTML` because it avoids the overhead of parsing the HTML content multiple times.

**Pros and Cons**

* **innerHTML**:
	+ Pros: Simple to implement, widely supported.
	+ Cons: Can lead to performance issues if the HTML content is large or complex, as it requires parsing the entire document.
* **DocumentFragment**:
	+ Pros: More efficient than `innerHTML` for large or complex HTML content, reduces parsing overhead.
	+ Cons: Requires creating a new fragment and appending elements to it, which can be more complex to implement.

**Library and Its Purpose**

In both test cases, the `DocumentFragment` library is used. A `DocumentFragment` is a lightweight object that allows you to create a clone of an HTML document or a part of one, without actually creating new DOM elements. It's useful for optimizing performance when dealing with large amounts of HTML content.

**Special JavaScript Features or Syntax**

None are mentioned in the provided JSON. However, it's worth noting that `DocumentFragment` is a built-in feature in modern browsers, and its usage is well-documented.

**Other Alternatives**

If you're looking for alternative approaches to compare performance, here are some options:

1. **createElement + appendChild**: This approach creates new DOM elements using `createElement` and appends them to another element using `appendChild`. While not as efficient as `DocumentFragment`, it can still be a viable option.
2. **outerHTML**: Similar to `innerHTML`, but allows you to specify the outer HTML content, which can be more efficient for updating large amounts of content.

Keep in mind that these alternatives may have different performance characteristics and may not be suitable for all use cases.

**Benchmark Preparation Code**

The provided JSON includes the script preparation code (`"Script Preparation Code": null`) and HTML preparation code (`"Html Preparation Code": "<div id=\"viewer\"></div>"`). These codes are used to set up the benchmark environment, but their contents are not relevant to the performance comparison.

Related benchmarks:

Large data Performance: innerHTML vs DocumentFragment (version: 6)

Comparing performance of: innerHTML vs DocumentFragment

Created: 4 years ago by: Registered User

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