Benchmark: template innerHTML vs DocumentFragment createElement without clone

Tests:

template
const tpl = document.createElement('template'); tpl.innerHTML = ` <div> <h1>Heading</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> <button>Button</button> </div> `; document.documentElement.appendChild(tpl.content);
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
template
DocumentFragment

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark and explain what's being tested, compared, and the pros/cons of each approach.

**Benchmark Overview**

The benchmark compares two approaches for rendering HTML content:

1. **Template InnerHTML**: Using `innerHTML` to set the content of a template element (`template`) directly.
2. **DocumentFragment createElement without clone**: Creating a `DocumentFragment` element and appending child elements to it, then appending the fragment to the document's body.

**Pros/Cons of each approach**

### Template InnerHTML

Pros:

* Simple and straightforward
* Fast execution time (no overhead from creating or manipulating DOM nodes)

Cons:

* Can be slower due to:
	+ DOM node creation and manipulation (e.g., setting `innerHTML`)
	+ Potential browser performance issues with large HTML strings
	+ Security risks if user-inputted content is used in the template

### DocumentFragment createElement without clone

Pros:

* More efficient than using `innerHTML` since it avoids creating unnecessary DOM nodes
* Can lead to better browser performance, especially for larger datasets

Cons:

* Requires more setup and manipulation of DOM elements (e.g., creating and appending child elements)
* May have additional overhead due to:
	+ Document fragment creation and management
	+ Potential browser cache issues with frequent DOM updates

**Library/Technology Used**

In both test cases, the following libraries/technologies are used:

* `innerHTML` is a built-in JavaScript method for setting the content of an element.
* `DocumentFragment` is a standard HTML element that allows you to group multiple elements together without actually rendering them in the DOM.

No external libraries or frameworks are explicitly mentioned.

**Special JS Features/Syntax**

The benchmark uses a feature called **template literals**, which was introduced in ECMAScript 2015 (ES6). Template literals allow you to embed expressions inside string literals, making it easier to create complex HTML strings. This feature is not specific to the benchmark but is used in the `innerHTML` assignment.

**Alternative Approaches**

Other approaches that could be compared include:

1. Using `createElementAndInsert` instead of `appendChild` for better performance.
2. Utilizing a JavaScript library like React or Angular for rendering, which can optimize DOM updates and improve browser performance.
3. Employing server-side rendering (SSR) techniques to render HTML on the server before sending it to the client, rather than using client-side JavaScript.

Keep in mind that these alternative approaches might introduce additional complexity, dependencies, or overhead compared to the simple `innerHTML` and `DocumentFragment` methods used in this benchmark.

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36

Browser/OS: Chrome 100 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
template	54513.0 Ops/sec
DocumentFragment	53055.3 Ops/sec

Related benchmarks:

template innerHTML vs DocumentFragment createElement without clone (version: 0)

Comparing performance of: template vs DocumentFragment

Created: 2 years ago by: Guest

Jump to the latest result

template

DocumentFragment

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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