Run results for: DocumentFragment vs Template innerHTML vs Template Nodes

Run details:

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: Safari 15

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 3 years ago

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

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

Run results for: DocumentFragment vs Template innerHTML vs Template Nodes

Template with innerHTML

Template with Nodes

Document Fragment