Run results for: cloneNode vs DocumentFragment

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.11 Safari/537.36 Edg/88.0.705.9

Browser: Chrome 88

Operating system: Windows

Device Platform: Desktop

Date tested: 4 years ago

Test name	Executions per second
cloneNode	812.6 Ops/sec
DocumentFragment	90.8 Ops/sec

Script Preparation code:

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

function createByCloneNode() {
    return el.cloneNode()
}

function createByDocumentFragment() {
    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);
  
  	return fragment
}

Tests:

cloneNode
for (var i = 0; i < 1000; i++) { document.documentElement.appendChild(createByCloneNode()); }
DocumentFragment
for (var i = 0; i < 1000; i++) { document.documentElement.appendChild(createByDocumentFragment()); }