Benchmark: DocumentFragment vs Template innerHTML vs Template Nodes

Script Preparation code:

function getTemplateInnerHTML()
{
	const template = document.createElement('template');
	template.innerHTML = `
    <div>
        <h1>Heading</h1>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
        <button>Button</button>
    </div>
    `;

	const element = template.content.firstElementChild;
    const clone   = element.cloneNode();
	document.documentElement.appendChild(clone);
    return clone;
};

function getTemplateNodes()
{
	const template = document.createElement('template');

    const element = 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';

    element.appendChild(heading);
    element.appendChild(para1);
    element.appendChild(para2);
    element.appendChild(button);

  	template.content.appendChild(element);

	document.documentElement.appendChild(element);
    return element;
};

function getDocumentFragment()
{
	const   fragment = document.createElement('template');

    const element  = 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';

    element.appendChild(heading);
    element.appendChild(para1);
    element.appendChild(para2);
    element.appendChild(button);

    fragment.appendChild(element);
	document.documentElement.appendChild(fragment);
    return fragment;
};

​x
 
function getTemplateInnerHTML(){    const template = document.createElement('template');    template.innerHTML = `    <div>        <h1>Heading</h1>        <p>Paragraph 1</p>        <p>Paragraph 2</p>        <button>Button</button>    </div>    `;​    const element = template.content.firstElementChild;    const clone   = element.cloneNode();    document.documentElement.appendChild(clone);    return clone;};​function getTemplateNodes(){    const template = document.createElement('template');​    const element = 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';​    element.appendChild(heading);    element.appendChild(para1);    element.appendChild(para2);    element.appendChild(button);​    template.content.appendChild(element);​    document.documentElement.appendChild(element);    return element;};​function getDocumentFragment(){    const   fragment = document.createElement('template');​    const element  = 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';​    element.appendChild(heading);    element.appendChild(para1);    element.appendChild(para2);    element.appendChild(button);​    fragment.appendChild(element);    document.documentElement.appendChild(fragment);    return fragment;};

Tests:

Template with innerHTML
var templateInnerHTML = getTemplateInnerHTML();
var templateInnerHTML = getTemplateInnerHTML();
Template with Nodes
var templateNodes = getTemplateNodes();
var templateNodes = getTemplateNodes();
Document Fragment
var documentFragment = getDocumentFragment();
var documentFragment = getDocumentFragment();

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 with innerHTML
Template with Nodes
Document Fragment

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 years ago)

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

Browser/OS: Safari 15 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Template with innerHTML	127980.9 Ops/sec
Template with Nodes	185356.6 Ops/sec
Document Fragment	290640.5 Ops/sec

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

Let's break down the provided benchmark and explain what is being tested.

Benchmark Overview

The benchmark measures the performance of three different approaches to render HTML content:

Document Fragment: Creates a new template element, clones its child nodes, and appends it to the document body.
Template with innerHTML: Uses the innerHTML property to set the HTML content of a newly created template element.
Template with Nodes: Manually creates all the necessary DOM elements (heading, paragraphs, button) and appends them to a new template element.

Options Being Compared

The benchmark compares the performance of these three approaches:

Document Fragment: Creates a cloned copy of its child nodes and appends it to the document body.
Template with innerHTML: Sets the HTML content directly on the template element using innerHTML.
Template with Nodes: Manually creates all the necessary DOM elements and appends them to a new template element.

Pros and Cons of Each Approach

Document Fragment: Pros:
- Can improve performance by reducing the number of DOM mutations.
- Reduces the need for manual DOM manipulation. Cons:
- May require more memory allocation for the cloned content.
- Can be slower for very large or complex templates due to cloning.
Template with innerHTML: Pros:
- Fast and efficient, as it only sets the HTML content. Cons:
- Requires manual DOM manipulation, which can lead to performance issues if not done correctly.
Template with Nodes: Pros:
- Manually creates all necessary elements, avoiding any potential cloning or parsing overhead. Cons:
- Slower due to manual creation of elements and appending them to the template.

Library and Purpose

The template element is a built-in HTML element that allows for dynamic rendering of HTML content. In this benchmark, it's used to create a new template element, which serves as a container for the cloned or manually created DOM elements.

Special JS Feature/Syntax

There are no special JavaScript features or syntax being used in this benchmark. The code is standard JavaScript, using modern DOM manipulation techniques.

Other Alternatives

In general, other approaches to rendering HTML content might include:

Using a virtual DOM library like React or Preact.
Utilizing a library like jQuery for DOM manipulation.
Employing Web Workers or WebAssembly for parallelized computation.

However, these alternatives are not directly relevant to the specific benchmark being discussed.

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is being tested.

**Benchmark Overview**

The benchmark measures the performance of three different approaches to render HTML content:

1. **Document Fragment**: Creates a new `template` element, clones its child nodes, and appends it to the document body.
2. **Template with innerHTML**: Uses the `innerHTML` property to set the HTML content of a newly created template element.
3. **Template with Nodes**: Manually creates all the necessary DOM elements (heading, paragraphs, button) and appends them to a new template element.

**Options Being Compared**

The benchmark compares the performance of these three approaches:

* Document Fragment: Creates a cloned copy of its child nodes and appends it to the document body.
* Template with innerHTML: Sets the HTML content directly on the template element using `innerHTML`.
* Template with Nodes: Manually creates all the necessary DOM elements and appends them to a new template element.

**Pros and Cons of Each Approach**

1. **Document Fragment**: Pros:
	* Can improve performance by reducing the number of DOM mutations.
	* Reduces the need for manual DOM manipulation.
Cons:
	* May require more memory allocation for the cloned content.
	* Can be slower for very large or complex templates due to cloning.
2. **Template with innerHTML**: Pros:
	* Fast and efficient, as it only sets the HTML content.
Cons:
	* Requires manual DOM manipulation, which can lead to performance issues if not done correctly.
3. **Template with Nodes**: Pros:
	* Manually creates all necessary elements, avoiding any potential cloning or parsing overhead.
Cons:
	* Slower due to manual creation of elements and appending them to the template.

**Library and Purpose**

The `template` element is a built-in HTML element that allows for dynamic rendering of HTML content. In this benchmark, it's used to create a new template element, which serves as a container for the cloned or manually created DOM elements.

**Special JS Feature/Syntax**

There are no special JavaScript features or syntax being used in this benchmark. The code is standard JavaScript, using modern DOM manipulation techniques.

**Other Alternatives**

In general, other approaches to rendering HTML content might include:

* Using a virtual DOM library like React or Preact.
* Utilizing a library like jQuery for DOM manipulation.
* Employing Web Workers or WebAssembly for parallelized computation.

However, these alternatives are not directly relevant to the specific benchmark being discussed.

Related benchmarks:

DocumentFragment vs Template innerHTML vs Template Nodes (version: 0)

Comparing performance of: Template with innerHTML vs Template with Nodes vs Document Fragment

Created: 3 years ago by: Registered User

Jump to the latest result

Template with innerHTML

Template with Nodes

Document Fragment

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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