Run results for: template innerHTML vs DocumentFragment vs createElement - createTextNode

Run details:

User agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:109.0) Gecko/20100101 Firefox/115.0

Browser: Firefox 115

Operating system: Windows 8.1

Device Platform: Desktop

Date tested: 7 months ago

Test name	Executions per second
template	36697.9 Ops/sec
DocumentFragment	55058.3 Ops/sec
createElement	67893.7 Ops/sec
createElement createTextNode	42917.2 Ops/sec

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

Run results for: template innerHTML vs DocumentFragment vs createElement - createTextNode

template

DocumentFragment

createElement

createElement createTextNode