Benchmark: Mustache vs. DOM

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' }));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Mustache
DOM Builder

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and its options.

**Benchmark Description**

The benchmark compares two approaches: Mustache, a templating engine, and DOM Builder, which is likely a custom implementation of building HTML elements using JavaScript.

**Options Compared**

1. **Mustache**: Uses the Mustache templating engine to render templates with dynamic data.
2. **DOM Builder**: A custom implementation that uses JavaScript to build HTML elements dynamically.

**Pros and Cons**

**Mustache:**

Pros:

* Easy to use and understand
* Supports a wide range of data formats (JSON, objects, etc.)
* Fast rendering performance

Cons:

* Requires additional dependencies (Mustache library)
* Can be slower than the custom implementation for very large templates

**DOM Builder:**

Pros:

* Custom implementation allows for fine-grained control over HTML generation
* May perform better for large templates due to its dynamic nature
* No additional dependencies required

Cons:

* More complex and harder to understand, especially for those without JavaScript experience
* May require more boilerplate code for setup and cleanup

**Library Used (Mustache)**

The Mustache library is a popular templating engine that allows developers to render templates with dynamic data. It's widely used in various projects and provides a simple way to separate presentation logic from business logic.

**Special JS Features/Syntax**

None mentioned, as the benchmark focuses on comparing two approaches rather than testing specific JavaScript features or syntax.

**Other Alternatives**

If you're looking for alternative templating engines, some popular options include:

* Handlebars
* Pug (formerly Jade)
* EJS (Embedded JavaScript)
* Liquid

For custom HTML generation without templating engines, consider using a library like React or Angular to build reusable UI components.

In conclusion, the benchmark provides valuable insights into the performance differences between Mustache and DOM Builder. By understanding the pros and cons of each approach, developers can make informed decisions about which one to use depending on their project's specific needs.

Related benchmarks:

Mustache vs. DOM (version: 2)

Comparing performance of: Mustache vs DOM Builder

Created: 9 years ago by: Registered User

Jump to the latest result

Mustache

DOM Builder

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):