Benchmark: Hogan vs Mustache vs HB

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

Tests:

HB
handlebarsRenderer({thing:"hello"});
Hogan
hoganRenderer.render({thing:"hello"});
Mustache
Mustache.render(template, {thing:"hello"});

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
HB
Hogan
Mustache

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

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

**What is being tested?**

The provided benchmark measures the performance of three different templating engines:

1. Handlebars (HB)
2. Hogan
3. Mustache

Specifically, each test case evaluates a predefined template with a single variable `thing` set to `"hello"`. The goal is to determine which templating engine renders the template fastest.

**Options compared**

The benchmark compares three approaches:

1. **Handlebars**: Uses the Handlebars compiler (`handlebarsRenderer`) to render the template.
2. **Hogan**: Utilizes the Hogan compiler (`hoganRenderer`) to render the template.
3. **Mustache**: Leverages the Mustache compiler (`Mustache.render`) to render the template.

**Pros and Cons of each approach**

Here's a brief summary:

* **Handlebars**:
	+ Pros: Mature, widely adopted, and well-maintained library with a large community.
	+ Cons: May have additional overhead due to its feature-rich nature.
* **Hogan**:
	+ Pros: Smaller footprint, faster rendering times, and more lightweight than Handlebars.
	+ Cons: Less mature and less widely adopted compared to Handlebars.
* **Mustache**:
	+ Pros: Simple, fast, and easy to use, making it a great choice for simple templating needs.
	+ Cons: Limited feature set and not as widely adopted as other options.

**Library explanations**

* **Handlebars**: A popular JavaScript templating engine that allows you to define templates using HTML-like syntax. It's designed to be flexible and extensible, with features like conditionals, loops, and functions.
* **Hogan**: A lightweight alternative to Handlebars, focusing on speed and simplicity. Hogan provides a more compact template syntax and supports some of the same features as Handlebars.
* **Mustache**: A minimalist templating engine that uses a simple syntax to render templates. Mustache is designed for performance and ease of use, making it suitable for small-scale applications or when you need fast rendering times.

**Special JS feature or syntax**

There are no special JavaScript features or syntaxes mentioned in this benchmark. All three libraries support standard JavaScript functions and variables.

**Other alternatives**

If you're interested in exploring other templating engines, some popular alternatives include:

* **Pug**: A fast and lightweight alternative to Handlebars, with a simpler syntax.
* **EJS**: A server-side rendering engine that's similar to Handlebars but designed for Node.js environments.
* **Templating engines like React or Angular**, which use their own custom templating languages, may also be worth exploring depending on your project requirements.

When choosing a templating engine, consider factors like performance, complexity, and community support. MeasureThat.net provides a valuable resource for comparing the rendering times of different libraries and helping you make informed decisions about your project's template needs.

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 118 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
HB	244784.4 Ops/sec
Hogan	3888091.5 Ops/sec
Mustache	865589.4 Ops/sec

Related benchmarks:

Hogan vs Mustache vs HB (version: 0)

Comparing performance of: HB vs Hogan vs Mustache

Created: 3 years ago by: Guest

Jump to the latest result

HB

Hogan

Mustache

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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