Benchmark: mustache rendering performance test

HTML Preparation code:

<script src="https://rawgit.com/janl/mustache.js/v2.2.1/mustache.js"></script>
<script src="https://rawgit.com/satchmorun/mote/master/mote.js"></script>

Script Preparation code:

var template = "<strong>This is a slightly more complicated {{thing}}.</strong>.\n{{! Just ignore this business. }}\nCheck this out:\n{{#hasThings}}\n<ul>\n{{#things}}\n<li class={{className}}>{{word}}</li>\n{{/things}}</ul>.\n{{/hasThings}}\n{{^hasThings}}\n\n<small>Nothing to check out...</small>\n{{/hasThings}}";

var context = {
  thing: function() {
    return "blah";
  },
  things: [
    {"className": "one", word: "@fat"},
    {"className": "two", word: "@dhg"},
    {"className": "three", word:"@sayrer"}
  ],
  hasThings: true
};

Mustache.parse(template);
var moteRenderer = mote.compile(template);

Tests:

Mustache
Mustache.render(template, context);
Mote
moteRenderer(context);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Mustache
Mote

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in this benchmark.

**Mustache Rendering Performance Test**

The benchmark tests the performance of two rendering libraries: Mustache and Mote (formerly known as Mocha Template Engine). The test focuses on rendering a specific template with a complex layout, containing nested loops (`{{#hasThings}}`, `{{/hasThings}}`), conditionals (`{{! Just ignore this business. }}`, `{{^hasThings}}`), and dynamic values (`{{word}}`) using the `{{thing}}` function.

**Options Compared**

The benchmark compares the performance of two rendering approaches:

1. **Mustache**: The original Mustache template engine, which is a JavaScript port of the popular Mustache templating library.
2. **Mote**: A custom implementation of the Mustache template engine, developed by Satch Morun, with some notable differences from the original Mustache.

**Pros and Cons**

**Mustache:**

Pros:

* Well-established and widely used template engine
* Simple and easy to use
* Large community support

Cons:

* May not be optimized for performance, especially for complex templates
* Limited customizability compared to Mote

**Mote:**

Pros:

* Optimized for performance, with a focus on speed and efficiency
* More customizable than Mustache, allowing for fine-tuned rendering
* Smaller size compared to Mustache (around 20KB vs. Mustache's ~40KB)

Cons:

* Less widely used and supported compared to Mustache
* Steeper learning curve due to its custom implementation

**Library: Mustache**

Mustache is a popular JavaScript templating library that allows you to define templates using a simple syntax, then render them with dynamic values. The template engine compiles the template into machine code, which is executed on the client-side.

In this benchmark, Mustache's performance is compared to Mote's custom implementation of the same template.

**Library: Mote**

Mote (formerly known as Mocha Template Engine) is a custom implementation of the Mustache template engine. It was developed by Satch Morun with a focus on performance and customization. While it shares many similarities with the original Mustache, it has some notable differences in its rendering algorithm.

**JavaScript Feature/Syntax:**

The benchmark uses the `{{#hasThings}}` and `{{^hasThings}}` syntax, which is a part of the Mustache templating language. These syntax elements are used to define nested loops and conditionals in the template. They allow for more expressive and dynamic rendering.

**Other Alternatives**

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

* Handlebars.js: A widely-used template engine with a large community and many plugins.
* Pug.js (formerly known as Jade): A fast and flexible templating engine with a focus on simplicity and readability.
* Nunjucks: A templating engine developed by the Python community, which has gained popularity among JavaScript developers.

However, for this specific benchmark, Mustache and Mote are the primary contenders, as they are both implementations of the same template engine.

Latest run results:

Run details: (Test run date: 5 years ago)

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

Browser/OS: Firefox 52 on Windows

View result in a separate tab

Test name	Executions per second
Mustache	55669.2 Ops/sec
Mote	47149.3 Ops/sec

Related benchmarks:

mustache rendering performance test (version: 0)

Comparing performance of: Mustache vs Mote

Created: 6 years ago by: Guest

Jump to the latest result

Mustache

Mote

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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