hogan vs mustache vs underscore vs purejs vs handlebars vs ... (v11)

Revision 11 of this benchmark created on

Description

try to benchmark some js template libraries used code from : http://jsperf.com/2dom-manipulation-js-templating-vs-programatic-jquery and http://jsperf.com/dom-vs-innerhtml-based-templating

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.8.1/mustache.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.runtime.min.js"></script>
<script src="//twitter.github.com/hogan.js/builds/2.0.0/hogan-2.0.0.js"></script>

<div id="testcontainer" style="display: none;"></div>

<script>
 var mustacheTemplate = "<div><h1 class='header'>{{header}}</h1><div class='a'>{{a}}</div><div class='b'>{{b}}<div class='c'>{{c}}<div class='d'>{{d}}<div class='e'>{{e}}<div class='f'>{{f}}</div></div></div></div></div></div>";

 var underscoreTemplate = "<div><h1 class='header'><%=header%></h1><div class='a'><%=a%></div><div class='b'><%=b%><div class='c'><%=c%><div class='d'><%=d%><div class='e'><%=e%><div class='f'><%=f%></div></div></div></div></div></div>";

var mustacheCompiled = Mustache.parse(mustacheTemplate);

var handlebarsTemplate = Handlebars.compile(mustacheTemplate);

var underscoreTemplateCompiled = _.template(underscoreTemplate );

var hoganTemplate = Hogan.compile(mustacheTemplate);


var sharedVariables = {
   header: "Header",
   a: 'aaa',
   b: 'bbb',
   c: 'ccc',
   d: 'ddd',
   e: 'eee',
   f: 'fff'
  };

$("#testcontainer").empty();


</script>

Test runner

Ready to run.

Testing in
TestOps/sec
mustache
//Mustache.to_html(mustacheTemplate , sharedVariables);
Mustache.render(mustacheTemplate, sharedVariables);
ready
underscore
_.template(underscoreTemplate, sharedVariables);
ready
string format
var HTML = '<div>';
for (var propt in sharedVariables) {
  HTML += '<div class="b">' + propt + '</div>';
}
HTML += '</div>';
$("#testcontainer").innerHTML = HTML;
ready
underscore compiled
underscoreTemplateCompiled(sharedVariables);
ready
handlebars
handlebarsTemplate(sharedVariables);
ready
hogan
hoganTemplate.render(sharedVariables);
ready

Revisions

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