Benchmark: template innerHTML vs DocumentFragment 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);

Historical Performance Data aggregated from 23 community runs

Desktop Results:

Chrome 17 runs

DocumentFragment

124K/s

template

73K/s

Fastest: DocumentFragment (1.7x faster)

View exact numbers

✓ DocumentFragment: 123,626 ops/sec
• template: 73,111 ops/sec

Firefox 6 runs

DocumentFragment

111K/s

template

100K/s

Fastest: DocumentFragment (1.1x faster)

View exact numbers

✓ DocumentFragment: 110,822 ops/sec
• template: 100,231 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
template
DocumentFragment

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.0 Safari/605.1.15

Browser/OS: Safari 26 on Mac OS X 10.15.7

View result in a separate tab

DocumentFragment

580K/s

template

302K/s

View exact numbers

Test name	Executions per second
✓ DocumentFragment	580,198 Ops/sec
template	302,451 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark and its options, pros, cons, and other considerations.

**Benchmark Overview**

The benchmark compares two approaches: using an HTML template (`innerHTML`) versus using a `DocumentFragment` to render dynamic content.

**Options Compared**

1. **Template (`innerHTML`):**
	* Pros:
		+ Easy to use and understand.
		+ Works well for simple templates with minimal nested elements.
	* Cons:
		+ Can lead to poor performance due to the browser's HTML parsing and rendering overhead.
		+ May cause issues if the template contains malicious or user-inputted data.
2. **DocumentFragment:**
	* Pros:
		+ More efficient than `innerHTML` for complex templates with nested elements.
		+ Allows for better control over the rendering process, reducing browser overhead.
	* Cons:
		+ Requires more code and setup compared to `innerHTML`.
		+ May be less familiar to developers who are not experienced with DocumentFragment.

**Library Used**

In both test cases, the `createDocumentFragment()` method is used. A `DocumentFragment` is a container that holds a subset of the DOM tree. It's useful for optimizing performance by allowing you to update the fragment and then appending it to the document at once, rather than updating individual elements.

**Special JS Feature or Syntax**

There are no special JavaScript features or syntaxes mentioned in this benchmark.

**Benchmark Preparation Code**

The preparation code is empty, as required by MeasureThat.net. This means that the test case starts from a clean slate, without any pre-existing DOM elements or context.

**Other Alternatives**

Other approaches to rendering dynamic content include:

1. **Server-Side Rendering (SSR):** Renders HTML on the server and sends it to the client.
2. **Client-Side Rendering with Virtual DOM:** Uses libraries like React or Vue.js to optimize rendering by only updating the virtual DOM, which is then rendered to the real DOM.
3. **Custom Template Engines:** Implement custom template engines using JavaScript, such as Handlebars or Mustache.

Keep in mind that each approach has its pros and cons, and the choice of which one to use depends on the specific requirements of your project, including performance, complexity, and maintainability.

template innerHTML vs DocumentFragment createElement (version: 0)

Comparing performance of: `template vs DocumentFragment`

Created: 5 years ago by: Registered User

Go to the latest result

template

DocumentFragment

Historical Performance Data aggregated from 23 community runs

Desktop Results:

Chrome 17 runs

Firefox 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

template innerHTML vs DocumentFragment createElement (version: 0)

Comparing performance of: template vs DocumentFragment

Created: 5 years ago by: Registered User

Go to the latest result

template

DocumentFragment

Historical Performance Data aggregated from 23 community runs

Desktop Results:

Chrome 17 runs

Firefox 6 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: `template vs DocumentFragment`