Benchmark: Fragment js createElement 2

Script Preparation code:

function createFragment(strHTML) {
    return document.createRange().createContextualFragment(strHTML);
}

function createElement(tagName, props) {
    const element = document.createElement(tagName);

    if (props) {
        if (typeof props === 'string') {
            element.className = props;
        }
        else {
            for (const key in props) {
                element[key] = props[key];
            }
        }

    }

    return element;
}

Tests:

createFragment
createFragment(` <div class="eventList"> <h3 class="Titleevent"> <span class="TitleeventLabel">Evento: </span> <span class="TitleeventId">${'id'} - </span> <span class="TitleeventName">${'name'}</span> </h3> <div class="mensagemlist"> <div class="mensagemlistBox"> <label class="mensagemlistBoxLabel">Deje un mensaje:</label> <textarea class="mensagemlistBoxInput" id="mensajeLimit"></textarea> <small id="sprestante"></small> </div> <div class="mensagemlistButtons"> <input type="submit" value="Guardar" class="btn-guardar"> <button class="btn-excluir">Esta compra no es un regalo</button> </div> </div> </div> `)
createElement
const title = createElement('h3', { className: 'Titleevent' }); title.appendChild(createElement('span', { className: 'TitleeventLabel', textContent: 'Evento: ' })); title.appendChild(createElement('span', { className: 'TitleeventId', textContent: `${'id'} - ` })); title.appendChild(createElement('span', { className: 'TitleeventName', textContent: 'name' })); const messageList = createElement('div', { className: 'mensagemlist' }); const listBox = createElement('div', { className: 'mensagemlistBox' }); listBox.appendChild(createElement('label', { className: 'mensagemlistBoxLabel', textContent: 'Deje un mensaje:' })); listBox.appendChild(createElement('textarea', { className: 'mensagemlistBoxInput', id: 'mensajeLimit' })); listBox.appendChild(createElement('small', { id: 'sprestante' })); const buttons = createElement('div', { className: 'mensagemlistButtons' }); buttons.appendChild(createElement('input', { type: 'submit', value: 'Guardar', className: 'btn-guardar' })); buttons.appendChild(createElement('button', { className: 'btn-excluir', textContent: 'Esta compra no es un regalo' })); messageList.appendChild(listBox); messageList.appendChild(buttons); const container = createElement('div', 'eventList') container.appendChild(title); container.appendChild(messageList);
createFragment Small
createFragment(` <div class="eventList"> teste </div> `)
createElement Small
createElement('div', { className: 'eventList', textContent: 'teste' })

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
createFragment
createElement
createFragment Small
createElement Small

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: one year ago)

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

Browser/OS: Chrome 104 on Windows

View result in a separate tab

Test name	Executions per second
createFragment	11658.9 Ops/sec
createElement	33220.9 Ops/sec
createFragment Small	318924.0 Ops/sec
createElement Small	1102200.0 Ops/sec

Fragment js createElement 2 (version: 1)

Comparing performance of: createFragment vs createElement vs createFragment Small vs createElement Small

Created: one year ago by: Registered User

Jump to the latest result

createFragment

createElement

createFragment Small

createElement Small

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A