Benchmark: mustache rendering performance 3a

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

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

LLMs can make mistakes. Check important info.

I'll dive into the explanation.

The provided JSON represents a benchmark test case for measuring the performance of three different template engines: Handlebars, Hogan, and Mustache.

**Template Engines Overview**

1. **Handlebars**: A popular JavaScript templating engine that allows you to define templates as strings and render them with data.
2. **Hogan**: Another JavaScript templating engine that compiles templates into optimized code for better performance.
3. **Mustache**: A templating engine that uses a syntax similar to Handlebars but has some differences.

**Benchmark Definition**

The benchmark definition is an array of objects, each representing a test case:

* `Handlebars`: Compiles the provided template with the `Handlebars.compile()` method and renders it with the `handlebarsRenderer` function.
* `Hogan`: Compiles the template with the `Hogan.compile()` method and renders it with the `hoganRenderer.render()` function.
* `Mustache`: Renders the template directly using the `Mustache.render()` function.

**Comparison**

The three engines are compared in terms of their execution speed. The benchmark measures the number of executions per second (ExecutionsPerSecond) for each engine on a specific device platform and operating system.

**Pros and Cons**

* **Handlebars**: Pros: easy to learn, widely adopted; Cons: slower than Hogan.
* **Hogan**: Pros: optimized code, better performance; Cons: more complex syntax, less widely adopted.
* **Mustache**: Pros: simple syntax, fast execution; Cons: less popular, fewer resources.

**Library and Syntax**

In the `Script Preparation Code` section of the benchmark definition:

* Handlebars uses the `Handlebars.compile()` function to compile the template.
* Hogan uses the `Hogan.compile()` function to compile the template.
* Mustache doesn't require explicit compilation; it renders the template directly using the `Mustache.render()` function.

The syntax used in the templates is similar, but with some differences:

* Handlebars: `{{#thing}}` and `{{!ignore}}
* Hogan: no specific syntax highlighting
* Mustache: `{{thing}}`

**Other Alternatives**

There are other JavaScript templating engines available, such as:

* **Underscore.js**: A popular utility library that includes a templating engine.
* **Pug.js**: A lightweight templating engine with a simple syntax.

However, the three engines mentioned in this benchmark (Handlebars, Hogan, and Mustache) are among the most widely used and respected templating engines in the JavaScript community.

Latest run results:

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

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

Browser/OS: Chrome 96 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Handlebars	364421.0 Ops/sec
Hogan	1655876.5 Ops/sec
Mustache	428452.2 Ops/sec

Related benchmarks:

mustache rendering performance 3a (version: 0)

nya nya nya

Comparing performance of: Handlebars vs Hogan vs Mustache

Created: 2 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 one month ago):