Benchmark test for some JavaScript template engines (v17)

Revision 17 of this benchmark created on

Description

Benchmark test for...

  • Mustache.js
  • Hogan.js
  • Handlebars.js
  • Underscore.js(_.template)
  • jQuery.EJS
  • PURE

Preparation HTML

<textarea id="mustache">
<table border="1" style="width: 700px;font-size: 15px;text-align: center;border-collapse: collapse;">
  <caption>{{title}}</caption>
  <thead>
    <tr>
      <td style="width: 90px;"></td>
      {{#table.heads}}
      <th>{{.}}</th>
      {{/table.heads}}
    </tr>
  </thead>
  <tbody>
  {{#table.sections}}
  <tr>
    <td class="name" style="text-align: left;padding: 4px 0;">{{name}}</td>
    {{#section}}
    <td class="item" style="text-align: center;padding: 4px 0;">{{.}}</td>
    {{/section}}
  </tr>
  {{/table.sections}}
  </tbody>
</table>
</textarea>

<textarea id="underscore">
<table border="1" style="width: 700px;font-size: 15px;text-align: center;border-collapse: collapse;">
  <caption><%-title%></caption>
  <thead>
    <tr>
      <td style="width: 90px;"></td>
      <%_.each(table.heads,function(head){%>
      <th><%-head%></th>
      <%})%>
    </tr>
  </thead>
  <tbody>
    <%_.each(table.sections,function(s){%>
    <tr>
      <td class="name" style="text-align: left;padding: 4px 0;"><%-s.name%></td>
      <%_.each(s.section,function(section){%>
      <td class="item" style="text-align: center;padding: 4px 0;"><%-section%></td>
      <%})%>
    </tr>
    <%})%>
  </tbody>
</table>
</textarea>

<div id="pure" style="display: none;">
<table border="1" style="width: 700px;font-size: 15px;text-align: center;border-collapse: collapse;">
  <caption></caption>
  <thead>
    <tr>
      <td style="width: 90px;"></td>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="name" style="text-align: left;padding: 4px 0;"></td>
      <td class="item" style="text-align: center;padding: 4px 0;"></td>
    </tr>
  </tbody>
</table>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js"></script>
<script  src="https://cdnjs.cloudflare.com/ajax/libs/hogan.js/2.0.0/hogan.js"></script>
<script src="https://rawgithub.com/wycats/handlebars.js/1.0.0/dist/handlebars.runtime.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.3/underscore-min.js"></script>

<script src="http://beebole.com/pure/wp-content/themes/BeeBole-pure/libs/pure.js"></script>

</script>

Setup

// template data
    var templates = {
      mustache: $("#mustache").val(),
      underscore: $("#underscore").val(),
      pure: $p("#template-pure > table"),
      directive: {
        caption: "title",
        "thead th": {
          "head <- table.heads": {
            ".": "head"
          }
        },
        "tbody tr": {
          "s <- table.sections": {
            "td.name": "s.name",
            "td.item": {
              "section <- s.section": {
                ".": "section"
              }
            }
          }
        }
      }
    },
      // view data
      data = {
        title: "JavaScript Template Comparison",
        table: {
          heads: ["Mustache", "Hogan", "Handlebars", "Underscore", "EJS", "jQuery.EJS", "PURE", "No Template"],
           sections: [{
            name: "delimiter",
            section: ["○", "○", "×", "○", "○", "○", "-", "-"]
          }, {
            name: "logic-less",
            section: ["○", "○", "○", "×", "×", "×", "◎", "◎"]
          }, {
            name: "precompile",
            section: ["×", "○", "○", "×", "○", "×", "×", "×"]
          }, {
            name: "escape",
            section: ["○", "○", "○", "○", "○", "○", "△", "△"]
          }, {
            name: "method",
            section: ["○", "○", "◎", "○", "○", "◎", "○", "○"]
          }, {
            name: "standalone",
            section: ["○", "○", "○", "○", "○", "×", "×", "×"]
          }, {
            name: "partials",
            section: ["○", "○", "○", "×", "△", "×", "×", "×"]
          }]
        }
      };

Test runner

Ready to run.

Testing in
TestOps/sec
Mustache
Mustache.render(templates.mustache, data);
ready
Hogan.js
Hogan.compile(templates.mustache).render(data);
ready
Handlebars.js
Handlebars.compile(templates.mustache)(data);
ready
Underscore.js
_.template(templates.underscore)(data);
ready
PURE
templates.pure.compile(templates.directive)(data);
ready
No Template
renderNoTemplate(templates.noTemplate, data);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.