Run results for: Mustache vs. DOM

Run details:

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

Browser: Chrome 75

Operating system: Windows 8.1

Device Platform: Desktop

Date tested: 5 years ago

Test name	Executions per second
Mustache	11768.5 Ops/sec
DOM Builder	27871.8 Ops/sec

HTML Preparation code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
<div id="template-target"></div>

Script Preparation code:

const attributeExceptions = [
  `role`,
];

function appendText(el, text) {
  const textNode = document.createTextNode(text);
  el.appendChild(textNode);
}

function appendArray(el, children) {
  children.forEach((child) => {
    if (Array.isArray(child)) {
      appendArray(el, child);
    } else if (child instanceof window.Element) {
      el.appendChild(child);
    } else if (typeof child === `string`) {
      appendText(el, child);
    }
  });
}

function setStyles(el, styles) {
  if (!styles) {
    el.removeAttribute(`styles`);
    return;
  }

  Object.keys(styles).forEach((styleName) => {
    if (styleName in el.style) {
      el.style[styleName] = styles[styleName]; // eslint-disable-line no-param-reassign
    } else {
      console.warn(`${styleName} is not a valid style for a <${el.tagName.toLowerCase()}>`);
    }
  });
}

function makeElement(type, textOrPropsOrChild, ...otherChildren) {
  const el = document.createElement(type);

  if (Array.isArray(textOrPropsOrChild)) {
    appendArray(el, textOrPropsOrChild);
  } else if (textOrPropsOrChild instanceof window.Element) {
    el.appendChild(textOrPropsOrChild);
  } else if (typeof textOrPropsOrChild === `string`) {
    appendText(el, textOrPropsOrChild);
  } else if (typeof textOrPropsOrChild === `object`) {
    Object.keys(textOrPropsOrChild).forEach((propName) => {
      if (propName in el || attributeExceptions.includes(propName)) {
        const value = textOrPropsOrChild[propName];

        if (propName === `style`) {
          setStyles(el, value);
        } else if (value) {
          el[propName] = value;
        }
      } else {
        console.warn(`${propName} is not a valid property of a <${type}>`);
      }
    });
  }

  if (otherChildren) appendArray(el, otherChildren);

  return el;
}

var a = (...args) => makeElement(`a`, ...args);
var button = (...args) => makeElement(`button`, ...args);
var div = (...args) => makeElement(`div`, ...args);
var h1 = (...args) => makeElement(`h1`, ...args);
var header = (...args) => makeElement(`header`, ...args);
var p = (...args) => makeElement(`p`, ...args);
var span = (...args) => makeElement(`span`, ...args);

Tests:

Mustache
var template = Mustache.render('<div id="foo" class="bar">' + '<a href="{{url}}">{{message}}</a>' + '</div>', { message: 'Hello there', url: 'https://www.google.com' }); $('#template-target').append(template);
DOM Builder
var template2 = (data) => div({ id: 'foo', className: 'bar' }, a({ href: data.url }, data.message) ); document.querySelector('#template-target').appendChild(template2({ message: 'Hello there', url: 'https://www.google.com' }));

Run results for: Mustache vs. DOM

Mustache

DOM Builder