Run results for: Compare createElement vs template String - 100 times

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.4 Safari/605.1.15

Browser: Safari 18

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

createElement

6K/s

template String

114/s

View exact numbers

Test name	Executions per second
✓ createElement	5,662 Ops/sec
template String	114 Ops/sec

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 < 100; i++) {div.appendChild(createEmptySelect('aaa', i));}; div.innerHTML = '';
template String
for(i=1; i < 100; 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 = '';