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

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Template with innerHTML
Template with Nodes
Document Fragment

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

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: 4 years ago by: Registered User

Jump to the latest result

Template with innerHTML

Template with Nodes

Document Fragment

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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