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

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 2 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

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

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

Created: 2 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