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

Revision 5 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="//beebole.com/pure/wp-content/themes/BeeBole-pure/libs/pure.js"></script>
<script src="//documentcloud.github.com/underscore/underscore.js"></script>
<script src="//mustache.github.com/extras/mustache.js"></script>

<script src="//json2html.com/js/json2html.js"></script>

<script src="//json2html.com/js/jquery.json2html.js"></script>

<script src="//json2html.com/js/json2html-transform-helper.js"></script>
<script src="//builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
<script src="//akdubya.github.io/dustjs/dist/dust-full-0.3.0.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>
<div class="purejs_template"><div><h1 class="header"></h1><div class='a'></div><div class='b'><div class='c'><div class='d'><div class='e'><div class='f'></div></div></div></div></div></div></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 dustTemplate="<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 handlebarTemplate = Handlebars.compile(mustacheTemplate);

 var underscoreTemplateCompiled = _.template(underscoreTemplate );

var dustFn = dust.compile(dustTemplate);

var hoganTemplate = Hogan.compile(mustacheTemplate);

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

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

var values = ["SOMETHING", "THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS","THOMAS"];
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
mustache
//Mustache.to_html(mustacheTemplate , sharedVariables);
Mustache.render(mustacheTemplate , sharedVariables);
ready
pure js
$('.purejs_template').autoRender(sharedVariables);
ready
underscore
_.template(underscoreTemplate, sharedVariables);
ready
json2html
json2html.transform(sharedVariables, mustacheTemplate);
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
handlebarTemplate(sharedVariables);
ready
dust
dustFn(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.