Benchmark: Compare createElement vs template String

HTML Preparation code:

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

Script Preparation code:

function createElement(options) {
  const {
    element,
    classes,
    id,
    href,
    attributes,
    text,
  } = options;

  const currentElement = document.createElement(element);
  if (typeof classes !== 'undefined') currentElement.className = classes;
  if (typeof id !== 'undefined') currentElement.id = id;
  if (typeof href !== 'undefined') currentElement.href = href;
  if (typeof attributes !== 'undefined') attributes.forEach((el) => currentElement.setAttribute(el.name, el.value));
  if (typeof text !== 'undefined') currentElement.innerHTML = text;
  return currentElement;
};
function createEmptySelect(placeholder, stepNumber) {
  const selectWrapper = createElement({
    element: 'div',
    classes: (stepNumber === 1) ? 'adv_search__select --active' : 'adv_search__select',
  });
  const selectButton = createElement({
    element: 'button',
    classes: 'adv_search__button',
    attributes: [{ name: 'type', value: 'button' }],
  });
  const selectButtonIndex = createElement({
    element: 'span',
    classes: 'adv_search__button_index',
    text: stepNumber,
  });
  const selectButtonContent = createElement({
    element: 'span',
    classes: 'adv_search__button_content',
    attributes: [{ name: 'data-placeholder', value: placeholder }],
    text: placeholder,
  });
  const selectMenu = createElement({
    element: 'div',
    classes: 'adv_search__menu',
  });

  selectButton.appendChild(selectButtonIndex);
  selectButton.appendChild(selectButtonContent);
  selectWrapper.appendChild(selectButton);
  selectWrapper.appendChild(selectMenu);
  return selectWrapper;
};
const div = document.getElementById('div');

Tests:

createElement
for(i=1; i < 2; i++) {div.appendChild(createEmptySelect('aaa', i));}; div.innerHTML = '';
template String
for(i=1; i < 2; i++) {div.innerHTML += `<div class="${(i === 1) ? 'adv_search__select --active' : 'adv_search__select'}"><button class="adv_search__button" type="button"><span class="adv_search__button_index">${i}</span><span class="adv_search__button_content" data-placeholder="aaa">aaa</span></button><div class="adv_search__menu"></div></div>`}; div.innerHTML = '';

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
createElement
template String

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:137.0) Gecko/20100101 Firefox/137.0

Browser/OS: Firefox 137 on Windows

View result in a separate tab

Test name	Executions per second
createElement	117635.7 Ops/sec
template String	133785.9 Ops/sec

Related benchmarks:

Compare createElement vs template String (version: 16)

Comparing performance of: createElement vs template String

Created: 3 years ago by: Registered User

Jump to the latest result

createElement

template String

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A