Benchmark: Handlebars vs Hogan vs Mustache

HTML Preparation code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.6/handlebars.min.js" integrity="sha512-zT3zHcFYbQwjHdKjCu6OMmETx8fJA9S7E6W7kBeFxultf75OPTYUJigEKX58qgyQMi1m1EgenfjMXlRZG8BXaw==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/4.0.1/mustache.min.js" integrity="sha512-6AXIWogbKpsHvoZJrJtHpIYES4wP8czSj0zk7ZfwOYS8GWYFNSykwdfapt7yQc4ikZytemBu+QyVObzBHJMwYg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hogan.js/3.0.2/hogan.min.js" integrity="sha512-F6j8lc1UBrmZHqUGreg4gNVVMCehTbf/LU0s/nnsQJYVeFSdpci+fcL48gsTd1Fbf08sD/kL+is2QiEssvJ70g==" crossorigin="anonymous"></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 handlebarsRenderer = Handlebars.compile(template);
var hoganRenderer = Hogan.compile(template);
var mustacheRender = Mustache.parse(template);

Tests:

Handlebars
Handlebars.compile(template)
Hogan
Hogan.compile(template)
Mustache
Mustache.parse(template)

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: 11 months ago)

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

Browser/OS: Chrome 137 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Handlebars	105525096.0 Ops/sec
Hogan	8352242.0 Ops/sec
Mustache	10756962.0 Ops/sec

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

LLMs can make mistakes. Check important info.

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

**Benchmark Overview**

The benchmark compares the performance of three template rendering libraries: Handlebars, Hogan, and Mustache. The test case uses the same template string, which is defined in the `Script Preparation Code` section of the benchmark definition JSON. The task is to compile this template string into a renderable format using each library.

**Template Rendering Libraries**

1. **Handlebars**: A popular JavaScript templating engine that allows developers to create dynamic web pages by separating presentation from application logic. Handlebars uses a syntax similar to HTML, but with additional features like expressions and conditionals.
2. **Hogan**: Another template rendering library that aims to provide high performance and flexibility. Hogan is designed to be faster than traditional templating engines like Handlebars.
3. **Mustache**: A lightweight JavaScript templating engine that uses a syntax called "handlebars" (similar to Handlebars). Mustache is known for its simplicity and ease of use.

**Comparison Options**

The benchmark compares the performance of each library by executing their respective `compile` or `parse` methods on the same template string. The execution time is measured in executions per second, which represents how many times the template is rendered within a given timeframe.

**Pros and Cons**

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

* **Handlebars**:
	+ Pros: Wide adoption, extensive community support, and a comprehensive feature set.
	+ Cons: Can be slower than Hogan due to its more complex rendering process.
* **Hogan**:
	+ Pros: High performance, optimized for speed, and easy to use.
	+ Cons: Smaller community compared to Handlebars, which might limit its flexibility.
* **Mustache**:
	+ Pros: Lightweight, simple, and fast.
	+ Cons: Limited feature set compared to Handlebars and Hogan.

**Other Considerations**

When choosing a template rendering library, consider the following factors:

* **Complexity**: If you need to render complex templates with many conditionals or expressions, Handlebars might be a better choice. For simpler templates, Mustache could be sufficient.
* **Performance**: If speed is crucial for your application, Hogan might be the best option due to its optimized rendering process.
* **Community Support**: If you prefer a well-established community and a wide range of resources, Handlebars is likely the way to go.

**Latest Benchmark Results**

The latest benchmark results show that:

* Handlebars performs the fastest with an average execution time of 3680275.25 executions per second.
* Hogan comes in second with an average execution time of 1555071.125 executions per second.
* Mustache is the slowest with an average execution time of 1787664.625 executions per second.

Keep in mind that these results are specific to this particular template and may vary for other use cases.

**Other Alternatives**

If you're interested in exploring alternative template rendering libraries, consider:

* **Underscore.js**: A popular JavaScript library that provides utility functions, including templating helpers.
* **Pug.js**: A fast and flexible templating engine that compiles to plain JavaScript.
* **EJS (Embedded JavaScript)**: A traditional server-side templating engine that's widely used in Node.js applications.

Related benchmarks:

Handlebars vs Hogan vs Mustache (version: 0)

Comparing performance of: Handlebars vs Hogan vs Mustache

Created: 5 years ago by: Registered User

Jump to the latest result

Handlebars

Hogan

Mustache

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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