Handlebars.js vs Mustache.js

JavaScript performance comparison

Test case created by Curtis and last updated

Preparation code

<style type="text/css">
#output { overflow: hidden; }
#output .sample { width: 45%; padding: 1%; border: 1px solid #ccc; float: left; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.3.0/mustache.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0.beta2/handlebars.min.js"></script>
<script id="template_one" type="text/template">
        {{^first}}<li>{{#link}}<a href="{{url}}">{{/link}}{{name}}{{#link}}</a>{{/link}}</li>{{/first}}
    <p>Double rainbow!</p>
<div id="output">
    <div class="sample">
        <h2>Mustache Renders</h2>
        <div id="mu"></div>
    <div class="sample">
        <h2>Handlebars Renders</h2>
        <div id="hb"></div>
  var template = document.getElementById('template_one').innerText,
      data = {
          "header": "Colors",
          "items": [
              { "name": "rainbow", "first": true, "url": "#Rainbow" },
              { "name": "red", "link": true, "url": "#Red" },
              { "name": "orange", "link": true, "url": "#Orange" },
              { "name": "yellow", "link": true, "url": "#Yellow" },
              { "name": "green", "link": true, "url": "#Green" },
              { "name": "blue", "link": true, "url": "#Blue" },
              { "name": "purple", "link": true, "url": "#Purple" },
              { "name": "white", "link": false, "url": "#While" },
              { "name": "black", "link": false, "url": "#Black" }
          "double": true
  ui.benchmarks[1].setup = function() {
      hb_compiled = null;
  ui.benchmarks[2].setup = function() {
      hb_compiled = Handlebars.compile(template);
  document.getElementById('mu').innerHTML = Mustache.to_html(template, data);
  document.getElementById('hb').innerHTML = Handlebars.compile(template)(data);

Preparation code output

Mustache Renders

Handlebars Renders

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Mustache to_html
Mustache.to_html(template, data);
Handlebars: compile + render
Handlebars: compile once + render
if (!hb_compiled) {
    hb_compiled = Handlebars.compile(template);
Handlebars: render only

Compare results of other browsers


You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

1 comment

Elana commented :

Thanks in support of sharing such a good opinion, post is fastidious, thats why i have read it completely

Comment form temporarily disabled.

Add a comment