Benchmark: template innerHTML vs DocumentFragment vs createElement - createTextNode

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'); const headingText = document.createTextNode('Heading'); const para1Text = document.createTextNode('Paragraph 1'); const para2Text = document.createTextNode('Paragraph 2'); const buttonText = document.createTextNode('Button'); heading.appendChild(headingText); para1.appendChild(para1Text); para2.appendChild(para2Text); button.appendChild(buttonText); 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);
createElement createTextNode
// 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'); const headingText = document.createTextNode('Heading'); const para1Text = document.createTextNode('Paragraph 1'); const para2Text = document.createTextNode('Paragraph 2'); const buttonText = document.createTextNode('Button'); heading.appendChild(headingText); para1.appendChild(para1Text); para2.appendChild(para2Text); button.appendChild(buttonText); 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
createElement createTextNode

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 25 days ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:137.0) Gecko/20100101 Firefox/137.0

Browser/OS: Firefox 137 on Linux

View result in a separate tab

Test name	Executions per second
template	22661.1 Ops/sec
DocumentFragment	27366.9 Ops/sec
createElement	30385.1 Ops/sec
createElement createTextNode	35672.9 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

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

**Benchmark Definition**

The benchmark compares three approaches to render HTML templates:

1. **Template Element (`<template>`)**: This approach uses the `template` element to define a template with inner HTML.
2. **Document Fragment**: This approach creates a document fragment using `document.createDocumentFragment()` and appends elements to it before appending the entire fragment to the DOM.
3. **Element Creation with `createElement`**: This approach creates individual elements (e.g., `div`, `h1`, `p`, `button`) and sets their inner HTML using the `innerText` property.

**Comparison**

The benchmark measures the performance of each approach by cloning the template element or document fragment, appending it to the DOM, and counting the number of executions per second. The results are compared across different browsers and platforms.

**Pros and Cons**

1. **Template Element (`<template>`)**:
	* Pros: Simple, concise, and easy to read.
	* Cons: Can be slower due to parsing and compilation overhead.
2. **Document Fragment**:
	* Pros: Efficiently reduces DOM mutations by cloning elements instead of creating new ones.
	* Cons: Requires more code and may introduce additional memory allocations.
3. **Element Creation with `createElement`**:
	* Pros: Simple, fast, and widely supported.
	* Cons: Can lead to DOM mutations, which can be slower due to reflows.

**Library Usage**

None of the benchmark test cases use a specific JavaScript library.

**Special JS Features/Syntax**

The benchmark uses special syntax for creating text nodes (`document.createTextNode()`) but does not leverage any modern JavaScript features like `template literals` or `class components`.

**Other Alternatives**

To improve performance, alternative approaches could consider:

1. Using a template engine (e.g., Handlebars, Mustache) to compile and render templates.
2. Leveraging browser-specific APIs (e.g., WebAssembly) for faster execution.
3. Optimizing DOM manipulation using techniques like requestAnimationFrame or using libraries like React or Angular.

Keep in mind that these alternatives might come with additional complexity, dependencies, or trade-offs.

Related benchmarks:

template innerHTML vs DocumentFragment vs createElement - createTextNode (version: 0)

Comparing performance of: template vs DocumentFragment vs createElement vs createElement createTextNode

Created: 4 years ago by: Guest

Jump to the latest result

template

DocumentFragment

createElement

createElement createTextNode

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):