doT.js vs Hogan.js 3.0 vs Handlebars 3.0 vs JsRender

JavaScript performance comparison

Revision 2 of this test case created by oflow

Preparation code

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/olado/doT/master/doT.js"></script>
<script type="text/javascript" src="https://rawgit.com/twitter/hogan.js/master/web/builds/3.0.2/hogan-3.0.2.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.0/handlebars.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/BorisMoore/jsrender/master/jsrender.min.js"></script>

<script type="text/template" id="hogan">
<h1>{{title}}</h1>
<p>{{description}}</p>
<ul>{{#entries}}<li><a href="{{{url}}}">{{name}}</a><span>{{{tag}}}</span></li>{{/entries}}</ul>
</script>
<script type="text/template" id="dot">
<h1>{{!it.title}}</h1>
<p>{{!it.description}}</p>
<ul>{{~it.entries :item:i}}<li><a href="{{=item.url}}">{{!item.name}}</a><span>{{=item.tag}}</span></li>{{~}}</ul>
</script>
<script type="text/template" id="handlebars">
<h1>{{title}}</h1>
<p>{{description}}</p>
<ul>{{#each entries}}<li><a href="{{{url}}}">{{name}}</a><span>{{{tag}}}</span></li>{{/each}}</ul>
</script>
<script type="text/x-jsrender" id="jsrender">
<h1>{{>title}}</h1>
<p>{{>description}}</p>
<ul>{{for entries}}<li><a href="{{:url}}">{{>name}}</a><span>{{:tag}}</span></li>{{/for}}</ul>
</script>
<div id="content"></div>

      
<script>
Benchmark.prototype.setup = function() {
  var data = {
      title: 'Hogan.js vs doT.js vs Handlebars.js',
      description: '',
      entries: []
  }
  var entry = {
      url: 'http://example.com/',
      name: 'name',
      tag: '<b>tag</b>'
  };
  for (var i = 0; i < 10; i++) {
      data['entries'].push({
          url: entry['url']+i,
          name: entry['name']+i,
          tag: entry['tag']+i
      });
  }
  
  var content = $('#content'),
      tmpl_dot = doT.template($('#dot').text()),
      tmpl_hogan = Hogan.compile($('#hogan').text()),
      tmpl_handlebars = Handlebars.compile($('#handlebars').text());
  
  $.templates({tmpl_jsrender: $('#jsrender').text()});
  

};
</script>

Preparation code output

<div id="content"></div>

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
doT.js
content.html(tmpl_dot(data));
pending…
Hogan.js 3.0
content.html(tmpl_hogan.render(data));
pending…
Handlebars 3.0
content.html(tmpl_handlebars(data));
pending…
JsRender
content.html($.render.tmpl_jsrender(data));
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.

0 Comments