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

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Firefox 7 runs

createElement createTextNode

132K/s

createElement

120K/s

DocumentFragment

105K/s

template

85K/s

Fastest: createElement createTextNode (1.6x faster)

View exact numbers

✓ createElement createTextNode: 132,499 ops/sec
• createElement: 120,079 ops/sec
• DocumentFragment: 105,476 ops/sec
• template: 84,538 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
createElement
createElement createTextNode

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 137 on Windows

View result in a separate tab

createElement

218K/s

DocumentFragment

189K/s

createElement createTextNode

119K/s

template

84K/s

View exact numbers

Test name	Executions per second
✓ createElement	217,854 Ops/sec
DocumentFragment	189,001 Ops/sec
createElement createTextNode	118,919 Ops/sec
template	84,194 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 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.

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

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

Created: 5 years ago by: Guest

Go to the latest result

template

DocumentFragment

createElement

createElement createTextNode

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Firefox 7 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 vs createElement - createTextNode (version: 0)

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

Created: 5 years ago by: Guest

Go to the latest result

template

DocumentFragment

createElement

createElement createTextNode

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Firefox 7 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 vs createElement vs createElement createTextNode`