<script src="https://s3.amazonaws.com/builds.handlebarsjs.com/handlebars.min-v4.7.8.js"></script>
<script src="https://unpkg.com/mustache@4.2.0/mustache.min.js"></script>
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);
Mustache.parse(template);
handlebarsRenderer(context);
Mustache.render(template, context);
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
Handlebars | |
Mustache |
Test name | Executions per second |
---|---|
Handlebars | 200307.1 Ops/sec |
Mustache | 338529.0 Ops/sec |
Let's break down what's being tested in this benchmark.
Benchmark Context
The test compares the performance of two templating libraries: Handlebars and Mustache. Both libraries are used to render dynamic HTML templates with data.
Options Compared
Two options are compared:
Pros and Cons of Each Approach
Here are some pros and cons of each approach:
Libraries Used
In the benchmark code, both libraries are used to render the same template:
handlebarsRenderer
function is created using the Handlebars.compile()
method, and then the rendered HTML is generated by calling this function with the context
object.parse()
method of Mustache is used to parse the template string, and then the rendered HTML is generated by calling the render()
method with the template
string and the context
object.Special JS Feature/ Syntax
Neither library uses any special JavaScript features or syntax that's not widely available. However, both libraries use a templating syntax that's similar to HTML, which can make it easier to read and write templates.
Other Alternatives
If you're looking for alternative templating libraries, some popular options include:
Keep in mind that each library has its own strengths and weaknesses, so it's worth exploring each option to determine which one best fits your needs.