Benchmark: mustache rendering performance 4

HTML Preparation code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.6/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hogan.js/3.0.2/hogan.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/4.1.0/mustache.min.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
};

var handlebarsRenderer = Handlebars.compile(template);
var hoganRenderer = Hogan.compile(template);
Mustache.parse(template);

Tests:

Handlebars
handlebarsRenderer(context);
Hogan
hoganRenderer.render(context);
Mustache
Mustache.render(template, context);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Handlebars
Hogan
Mustache

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 13 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Handlebars	507447.2 Ops/sec
Hogan	2571224.2 Ops/sec
Mustache	812731.3 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Overview**

The benchmark measures the performance of three JavaScript templating engines: Handlebars, Hogan, and Mustache. The template contains a nested structure with conditionals, loops, and dynamic data. The benchmark compares the execution speed of each engine in rendering the same template with different input data.

**Template Breakdown**

The template is a complex string that defines a HTML structure using Handlebars syntax:
```html
<strong>This is a slightly more complicated {{thing}}.</strong>
{{! Just ignore this business. }}
Check this out:
{{#hasThings}}
<ul>
{{#things}}
<li class={{className}}>{{word}}</li>
{{/things}}
</ul>
{{^hasThings}}
<small>Nothing to check out...</small>
{{/hasThings}}
```
The template has the following features:

* Conditionals (`{{!}}`, `{{#}}, {{^}}`)
* Loops (`{{#things}}`)
* Dynamic data binding (`{{thing}}`, `{{word}}`)

**Benchmark Options**

There are three benchmark options compared in this test case:

1. **Handlebars**: The official Handlebars templating engine.
2. **Hogan**: A competing templating engine that uses a different syntax and optimization techniques.
3. **Mustache**: Another popular templating engine with its own strengths and weaknesses.

**Pros and Cons of Each Approach**

Here's a brief summary of the pros and cons of each approach:

* **Handlebars**:
	+ Pros: Well-established, widely adopted, and well-documented.
	+ Cons: Can be slower than Hogan for simple templates.
* **Hogan**:
	+ Pros: Optimized for performance, uses a more efficient syntax.
	+ Cons: Less widely adopted and less well-documented than Handlebars.
* **Mustache**:
	+ Pros: Simple and lightweight, easy to learn and use.
	+ Cons: Limited features compared to Handlebars and Hogan.

**Library and Syntax**

The template uses the following libraries:

* **Handlebars**: The `handlebars` library is included in the benchmark's HTML preparation code.
* **Hogan**: The `hogan` library is also included in the benchmark's HTML preparation code.
* **Mustache**: The `mustache` library is included in the benchmark's HTML preparation code.

The template uses Handlebars syntax, which includes conditionals (`{{!}}`, `{{#}}, {{^}}`) and loops (`{{#things}}`). Hogan uses a similar syntax, but with some differences. Mustache has its own unique syntax and features.

**Special JS Features**

None of the benchmarked libraries use special JavaScript features or syntax that are not widely supported. However, it's worth noting that the template does use a feature called "inline expressions" (`{{thing()}}`), which is specific to Handlebars.

**Other Alternatives**

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

* **Pug**: A syntax-based templating engine that compiles to JavaScript.
* **EJS**: An embedded JavaScript templating engine that allows you to use JavaScript in your templates.
* ** Nunjucks**: A fast and feature-rich templating engine that is designed for performance.

I hope this explanation helps!

Related benchmarks:

mustache rendering performance 4 (version: 0)

nya nya nya

Comparing performance of: Handlebars vs Hogan vs Mustache

Created: 4 years ago by: Guest

Jump to the latest result

Handlebars

Hogan

Mustache

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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