yet-more-innerhtml-vs-fragment

Benchmark created by davidpauljunior on

Preparation HTML

<div id="container"></div>

Setup

var container = document.getElementById('container');

Teardown



            while (container.firstChild) container.removeChild(container.firstChild);

Test runner

Ready to run.

Testing in
TestOps/sec
innerHTML
container.innerHTML = `
    <h1>Heading</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <button>Button</button>
`;
ready
DocumentFragment
var fragment = document.createDocumentFragment();

var heading = document.createElement('h1');
var para1 = document.createElement('p');
var para2 = document.createElement('p');
var button = document.createElement('button');

heading.innerText = 'Heading';
para1.innerText = 'Paragraph 1';
para2.innerText = 'Paragraph 2';
button.innerText = 'Button';

fragment.appendChild(heading);
fragment.appendChild(para1);
fragment.appendChild(para2);
fragment.appendChild(button);

container.appendChild(fragment);
ready
Append
var heading = document.createElement('h1');
var para1 = document.createElement('p');
var para2 = document.createElement('p');
var button = document.createElement('button');

heading.innerText = 'Heading';
para1.innerText = 'Paragraph 1';
para2.innerText = 'Paragraph 2';
button.innerText = 'Button';

container.appendChild(heading);
container.appendChild(para1);
container.appendChild(para2);
container.appendChild(button);
ready
DocumentFragment with .data
function setText(node, text) {
    let c = node
    if (c && !c.nextSibling && c.nodeType==3)
        c.data = text
    else
        c.textContent = text
}

var fragment = document.createDocumentFragment();

var heading = document.createElement('h1');
var para1 = document.createElement('p');
var para2 = document.createElement('p');
var button = document.createElement('button');

setText(heading, 'Heading');
setText(para1, 'Paragraph 1');
setText(para2, 'Paragraph 2');
setText(button, 'Button');

fragment.appendChild(heading);
fragment.appendChild(para1);
fragment.appendChild(para2);
fragment.appendChild(button);

container.appendChild(fragment);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

  • Revision 1: published by davidpauljunior on