Hadlebars vs. Hogan vs. Mustache vs. jsRender vs Dust vs Underscore

JavaScript performance comparison

Revision 49 of this test case created by MuthuKumaran Sankara Nainar

Info

Illustrate how much time string-based template engines use executing browsers HTML parser.

Optimizing string interpolation performance is focusing to 10% of the problem, not the 90%.

Preparation code

<div id="target"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script src="http://mustache.github.io/extras/mustache.js"></script>

<script src="http://jsdo.it/kyo_ago/6M93/js"></script>

<script src="http://akdubya.github.io/dustjs/dist/dust-full-0.3.0.js"></script>

<script src="http://borismoore.github.io/jsrender/jsrender.js"></script>

<script src="http://twitter.github.com/hogan.js/builds/3.0.1/hogan-3.0.1.js"></script>

<script src="http://underscorejs.org/underscore-min.js"></script>

<script>
  window.mustacheTemplate = "<div>{{template}}<h1 class='header'>{{header}}</h1><h2 class='header2'>{{header2}}</h2><h3 class='header3'>{{header3}}</h3><h4 class='header4'>{{header4}}</h4><h5 class='header5'>{{header5}}</h5><h6 class='header6'>{{header6}}</h6><ul class='list'>{{#list}}<li class='item'>{{.}}</li>{{/list}}</ul></div>";

  window.hoganTemplate = Hogan.compile("<div>{{template}}<h1 class='header'>{{header}}</h1><h2 class='header2'>{{header2}}</h2><h3 class='header3'>{{header3}}</h3><h4 class='header4'>{{header4}}</h4><h5 class='header5'>{{header5}}</h5><h6 class='header6'>{{header6}}</h6><ul class='list'>{{#list}}<li class='item'>{{.}}</li>{{/list}}</ul></div>");

  window.templateTemplate = "<div><{template}h1 class='header'>{{header}}</h1><h2 class='header2'>{{header2}}</h2><h3 class='header3'>{{header3}}</h3><h4 class='header4'>{{header4}}</h4><h5 class='header5'>{{header5}}</h5><h6 class='header6'>{{header6}}</h6><ul class='list'>{{loop list}}<li class='item'>{{this}}</li>{{/loop}}</ul></div>";

  $.templates({ jsRenderTemplate: "<div>{{:template}}<h1 class='header'>{{:header}}</h1><h2 class='header2'>{{:header2}}</h2><h3 class='header3'>{{:header3}}</h3><h4 class='header4'>{{:header4}}</h4><h5 class='header5'>{{:header5}}</h5><h6 class='header6'>{{:header6}}</h6><ul class='list'>{{for list}}<li class='item'>{{:#data}}</li>{{/for}}</ul></div>"});

 window.dustTemplate = dust.compile("<div>{{template}}<h1 class='header'>{{header}}</h1><h2 class='header2'>{{header2}}</h2><h3 class='header3'>{{header3}}</h3><h4 class='header4'>{{header4}}</h4><h5 class='header5'>{{header5}}</h5><h6 class='header6'>{{header6}}</h6><ul class='list'>{{#list}}<li class='item'>{{.}}</li>{{/list}}</ul></div>", "intro");

  window.underscoreTemplate = _.template("<div><%=template%><h1 class='header'><%=header%></h1><h2 class='header2'><%=header2%></h2><h3 class='header3'><%=header3%></h3><h4 class='header4'><%=header4%></h4><h5 class='header5'><%=header5%></h5><h6 class='header6'><%=header6%></h6><ul class='list'><%for(var i in list){%><li class='item'><%=list[i]%></li><% } %></ul></div>");
</script>
<script>
Benchmark.prototype.setup = function() {
      window.sharedVariables = {
        header: "Header",
        header2: "Header2",
        header3: "Header3",
        header4: "Header4",
        header5: "Header5",
        header6: "Header6",
        list: ['10000000', '2', '3', '4', '5', '6', '7', '8', '9', '10']
      };
};

Benchmark.prototype.teardown = function() {
    $("#target").html('');
};
</script>

Preparation code output

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
DOM - Mustache.js Template
sharedVariables.template = 'Mustache.js';
$("#target").html(Mustache.to_html(mustacheTemplate, sharedVariables));
++sharedVariables.list[0];
pending…
DOM - Twitter's Hogan.js
sharedVariables.template = 'Hogan.js';
$("#target").html(hoganTemplate.render(sharedVariables));
++sharedVariables.list[0];
pending…
DOM - jsRender
sharedVariables.template = 'jsRender';
$("#target").html($.render.jsRenderTemplate(sharedVariables));
++sharedVariables.list[0];
pending…
DOM - dust.js
sharedVariables.template = 'dust';
dust.loadSource(dustTemplate);

    dust.render("intro", sharedVariables, function(err, out) {
        $("#target").html(out);
    });
++sharedVariables.list[0];
pending…
DOM - template.js
sharedVariables.template = 'template.js';
$("#target").html(template(templateTemplate, sharedVariables));
++sharedVariables.list[0];
pending…
Underscore
sharedVariables.template = 'underscore.js';
$("#target").html(window.underscoreTemplate(sharedVariables));
++sharedVariables.list[0];
pending…

Compare results of other browsers

Revisions

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:

0 comments

Add a comment