abc

Benchmark created on

Setup

function jsx(html, ...args) {
  return html.slice(1).reduce((str, elem, i) => str + args[i] + elem, html[0]);
}

function domEl(tag, ...items) {
  const element = document.createElement(tag);

  if (!items || items.length === 0) return element;

  if (!(items[0] instanceof Element || items[0] instanceof HTMLElement) && typeof items[0] === 'object') {
    const [attributes, ...rest] = items;
    items = rest;

    Object.entries(attributes).forEach(([key, value]) => {
      if (!key.startsWith('on')) {
        element.setAttribute(key, Array.isArray(value) ? value.join(' ') : value);
      } else {
        element.addEventListener(key.substring(2).toLowerCase(), value);
      }
    });
  }

  items.forEach((item) => {
    item = item instanceof Element || item instanceof HTMLElement ? item : document.createTextNode(item);
    element.appendChild(item);
  });

  return element;
}

/*
  More short hand functions can be added for very common DOM elements below.
  domEl function from above can be used for one off DOM element occurrences.
*/
function div(...items) { return domEl('div', ...items); }
function p(...items) { return domEl('p', ...items); }
function a(...items) { return domEl('a', ...items); }
function h3(...items) { return domEl('h3', ...items); }

item = {
  'path': 'http://google.com',
  'pic': 'http://google.com',
  'card-title': 'hello world',
  'card-description': 'lorem ipsum',
};

Test runner

Ready to run.

Testing in
TestOps/sec
jsx
block = document.createElement('div');

let html = "";
for (let i = 0; i < 10; i++) {
  html += `
    <div class="slider-item">
      <div class="slider-image">
        <a href="${item.path}">${item.pic}</a>
      </div>
      <div class="slider-text">
        <h3><a href="${item.path}">${item['card-title']}</a></h3>
        <p>${item['card-description']}</p>
      </div>
    </div>
`;
}

block.innerHTML = jsx`${html}`;

// console.log(block);
ready
domel
const block = document.createElement('div');
// cards = [];

for (let i = 0; i < 10; i++) {
  block.appendChild(
    div({ class: 'slider-item' },
      div({ class: 'slider-image' },
        a({ href: item.path }, 
          item.pic
        )
      ),
      div({ class: 'slider-text' },
        h3(
          a({ href: item.path }, 
            item['card-title']
          )
        ),
        p(item['card-description'])
      )
    )
  );
}
ready

Revisions

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