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

​x
 
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.firstElementChilddocument.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);

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

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

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
template
DocumentFragment
createElement
createElement createTextNode

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Firefox 135 on Ubuntu

View result in a separate tab

Test name	Executions per second
template	176237.4 Ops/sec
DocumentFragment	147640.6 Ops/sec
createElement	200067.5 Ops/sec
createElement createTextNode	216041.1 Ops/sec

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

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:

Template Element (<template>): This approach uses the template element to define a template with inner HTML.
Document Fragment: This approach creates a document fragment using document.createDocumentFragment() and appends elements to it before appending the entire fragment to the DOM.
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

Template Element (<template>):
- Pros: Simple, concise, and easy to read.
- Cons: Can be slower due to parsing and compilation overhead.
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.
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:

Using a template engine (e.g., Handlebars, Mustache) to compile and render templates.
Leveraging browser-specific APIs (e.g., WebAssembly) for faster execution.
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.

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**

**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