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

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: 4 months ago)

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

Browser/OS: Chrome 141 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
template	216549.3 Ops/sec
DocumentFragment	329974.4 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.

Related benchmarks:

template innerHTML vs DocumentFragment createElement (version: 0)

Comparing performance of: template vs DocumentFragment

Created: 5 years ago by: Registered User

Jump to the latest result

template

DocumentFragment

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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