Benchmark: template innerHTML vs DocumentFragment vs createElement

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> `; const el = tpl.content.firstElementChild document.documentElement.appendChild(el.cloneNode());
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);
createElement
// 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(el);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
template
DocumentFragment
createElement

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested, compared, and their pros and cons.

**Benchmark Overview**

The benchmark compares three approaches to rendering HTML content in JavaScript:

1. **Template**: Using a `template` element and its `innerHTML` property.
2. **DocumentFragment**: Using a `document.createDocumentFragment()` object to append child elements.
3. **createElement**: Creating individual HTML elements and appending them directly to the document.

**Test Cases**

Each test case represents a single benchmark, with the following components:

* **Benchmark Definition**: A string representing the JavaScript code that defines the benchmark.
* **Test Name**: The name of the benchmark (e.g., "template", "DocumentFragment", etc.).

Let's analyze each test case:

### Template

* **Benchmark Definition**:
```javascript
const tpl = document.createElement('template');
tpl.innerHTML = '\r\n<div>\r\n    <h1>Heading</h1>\r\n    <p>Paragraph 1</p>\r\n    <p>Paragraph 2</p>\r\n    <button>Button</button>\r\n</div>\r\n';
const el = tpl.content.firstElementChild;
document.documentElement.appendChild(el.cloneNode());
```
This code creates a `template` element, sets its `innerHTML`, and then clones the resulting template to create an HTML document fragment. The cloned fragment is then appended to the `document.documentElement`.

**Pros and Cons:**

* **Pros:** This approach can be efficient for rendering complex layouts or templates, as it avoids the overhead of creating individual elements.
* **Cons:** It relies on the browser's internal templating engine, which may not be optimized for performance. Additionally, cloning a template creates a new DOM tree, which can lead to additional memory allocation and garbage collection.

### DocumentFragment

* **Benchmark Definition**:
```javascript
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);
```
This code creates a `DocumentFragment` object, sets up individual HTML elements, and appends them to the fragment. Finally, the fragment is appended to the `document.documentElement`.

**Pros and Cons:**

* **Pros:** This approach avoids cloning, which reduces memory allocation and garbage collection overhead.
* **Cons:** It requires more code to create individual elements and append them to a fragment.

### createElement

* **Benchmark Definition**:
```javascript
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);

document.documentElement.appendChild(el);
```
This code creates individual HTML elements, sets their text content, and appends them to a `div` element. The resulting element is then appended to the `document.documentElement`.

**Pros and Cons:**

* **Pros:** This approach is simple and easy to understand.
* **Cons:** It creates multiple DOM nodes, which can lead to additional memory allocation and garbage collection.

**Alternative Approaches:**

1. **Using a Virtual DOM**: Some libraries, like React or Preact, use a virtual DOM to optimize rendering performance. They create a lightweight in-memory representation of the DOM, which is updated on every state change.
2. **Shadow DOM**: Another approach is using Shadow DOM, which allows you to isolate a portion of the DOM and manage it independently. This can be useful for complex layouts or components with multiple states.

In summary, the benchmark compares three approaches to rendering HTML content in JavaScript:

* Template: Uses a `template` element and its `innerHTML` property.
* DocumentFragment: Uses a `document.createDocumentFragment()` object to append child elements.
* createElement: Creates individual HTML elements and appends them directly to the document.

Each approach has its pros and cons, and the choice of which one to use depends on the specific requirements of your project.

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.190 Safari/537.36

Browser/OS: Chrome 88 on Windows

View result in a separate tab

Test name	Executions per second
template	45910.2 Ops/sec
DocumentFragment	69776.0 Ops/sec
createElement	61045.4 Ops/sec

Related benchmarks:

template innerHTML vs DocumentFragment vs createElement (version: 0)

Comparing performance of: template vs DocumentFragment vs createElement

Created: 3 years ago by: Guest

Jump to the latest result

template

DocumentFragment

createElement

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