MeasureThat.net

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

Go to the benchmark
Run details:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36
Chrome 97
Mac OS X 10.15.7
Desktop
3 years ago
Test name Executions per second
template 37692.9 Ops/sec
DocumentFragment 67585.1 Ops/sec
createElement 98312.5 Ops/sec
createElement createTextNode 55228.4 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);