Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
Run results for:
Fragment js createElement 56454
Go to the benchmark
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=599057" width="100%" height="500px"></iframe>
Run details:
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36 Edg/135.0.0.0
Browser:
Chrome 135
Operating system:
Windows
Device Platform:
Desktop
Date tested:
one year ago
Benchmark engine:
Benchmark.js
createElement
103K/s
createFragment
57K/s
View exact numbers
Test name
Executions per second
✓
createElement
103,061 Ops/sec
createFragment
57,317 Ops/sec
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);