Benchmark: DocumentFragment vs innerHTML

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
DocumentFragment
innerHTML

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's dive into the Benchmark Definition and its components.

**Benchmark Name**: The name of the benchmark is "DocumentFragment vs innerHTML". This benchmark compares the performance of two different approaches to set the content of an HTML element: using `document.createDocumentFragment()` and `innerHTML`.

**Script Preparation Code**: The script preparation code is empty, which means that no additional JavaScript code is executed before running the benchmark.

**Html Preparation Code**: Again, the html preparation code is also empty, indicating that no custom HTML structure is prepared for the benchmark.

Now, let's analyze the two test cases:

1. **DocumentFragment**:
	* The script creates a `document.createDocumentFragment()` instance and appends elements to it.
	* The fragment is then appended to the `htmlElement` (not explicitly mentioned in the code).
	* This approach allows for more efficient rendering of the content, as the browser can batch updates to the document body and render them all at once.

Pros:

+ Can lead to better performance, especially when dealing with large amounts of content.
	+ Allows the browser to optimize rendering.

Cons:

+ Requires creating a `documentFragment` instance and updating it manually.
	* May have a slight overhead due to the creation and manipulation of the fragment.

2. **innerHTML**:
	* The script creates an HTML element using `document.createElement()` and sets its innerHTML directly.
	* This approach is simpler and more straightforward, as it doesn't require creating a `documentFragment` instance.

Pros:

+ Simpler and easier to implement.
	+ Less overhead compared to the `DocumentFragment` approach.

Cons:

+ May lead to slower performance, especially when dealing with large amounts of content.
	* Can cause the browser to render each update individually, rather than batching them.

**Library**: In neither test case is a library explicitly mentioned. However, it's likely that both approaches rely on the built-in JavaScript features and APIs provided by the browser.

**Special JS feature or syntax**: Neither approach relies on any special JavaScript features or syntax.

Now, let's discuss the benchmark results:

The two test cases are run repeatedly (91833 times per second for "DocumentFragment" and 27307.75 times per second for "innerHTML") on a Chrome 108 browser on a Mac OS X 10.15.7 desktop platform. The raw UA string is identical for both tests, indicating that the differences in performance might be due to the specific implementation details of each approach.

**Alternatives**: If you were to modify this benchmark or create a new one, here are some potential alternatives:

1. Use other HTML elements or structures (e.g., `div`, `span`, `p`, etc.) to compare their performance.
2. Experiment with different browser versions or operating systems to see how the results change.
3. Introduce additional overhead in the code by using more expensive operations (e.g., network requests, DOM mutations).
4. Compare the performance of other content rendering approaches, such as using a CSS library or a templating engine.

By exploring these alternatives, you can gain a better understanding of the factors that influence the performance of different HTML content rendering approaches and make more informed decisions in your own projects.

Related benchmarks:

DocumentFragment vs innerHTML (version: 0)

Comparing performance of: DocumentFragment vs innerHTML

Created: 4 years ago by: Guest

Jump to the latest result

DocumentFragment

innerHTML

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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