Run details:
Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:109.0) Gecko/20100101 Firefox/115.0
Firefox 115
Windows 8.1
Desktop
9 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

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