Benchmark: cloneNode vs DocumentFragment

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
cloneNode
DocumentFragment

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: 3 months ago)

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

Browser/OS: Chrome 120 on Windows

View result in a separate tab

Test name	Executions per second
cloneNode	732.1 Ops/sec
DocumentFragment	119.9 Ops/sec

cloneNode vs DocumentFragment (version: 0)

Comparing performance of: cloneNode vs DocumentFragment

Created: 3 years ago by: Registered User

Jump to the latest result

cloneNode

DocumentFragment

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A