Build HTML Structure (v3)

Revision 3 of this benchmark created on

Preparation HTML

<div id="test"></div>

Setup

function loadTemplate(template) {
    const { tag, cls, children } = template;
    const el = document.createElement(tag);
    if (cls && cls.length) {
        el.classList.add(...cls)
    }

    if (children && children) {
    	for (let i = 0; i < children.length; i++) {
    		el.appendChild(loadTemplate(children[i]))
    	}
  	}

    return el;
}

Teardown

document.querySelector('#test').innerHTML = '';

Test runner

Ready to run.

Testing in
TestOps/sec
innerHTML
const template = `<div comp-id=""22""></div>`;
const tempDiv = document.createElement('div');
tempDiv.innerHTML = (template || '').trim();
document.querySelector('#test').appendChild(tempDiv.firstChild);
ready
Build
const template = document.createElement('div');
template.setAttribute('comp-id', `22`);
document.querySelector('#test').appendChild(template);
ready

Revisions

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