dinger template eval

JavaScript performance comparison

Test case created

Preparation code

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

<script src="https://rawgithub.com/linkedin/dustjs/master/dist/dust-full-1.2.3.min.js"></script>

<script src="https://rawgithub.com/documentcloud/underscore/master/underscore.js"></script>

<script src="https://rawgithub.com/janl/mustache.js/master/mustache.js"></script>

<script src="https://rawgithub.com/wycats/handlebars.js/master/dist/handlebars.js"></script>

<script src="https://rawgithub.com/olado/doT/master/doT.min.js"></script>

<script src="https://rawgithub.com/pure/pure/master/libs/pure.js"></script>

<div id="template" style="display:none">

  <div id="dot"></div>

  <div id="pure">
   <div>
    <h1 class="header"></h1>
    <div class='a'></div>
    <div class='b'></div>
    <div class='c'></div>
    <div class='d'></div>
    <div class='e'></div>
    <div class='f'></div>
    <div><ul><li class='flatarr'></li></ul></div>
    <div><ul><li class='objarr'></li></ul></div>
   </div>
  </div>

  <div id="underscore"></div>
  <div id="mustache"></div>
  <div id="handlebars"></div>
  <div id="dust"></div>

</div>

<script>
  var data = {
   header: 'Header',
   a: 'aaa',
   b: 'bbb',
   c: 'ccc',
   d: 'ddd',
   e: 'eee',
   f: 'fff',
   flatarr: ['1','2','3','4','5'],
   objarr: [{
      name: 'Maliq Ali',
      occupation: 'ninja'
   },{
      name: 'Walt',
      occupation: 'poet'
   }]
  };

  var mustacheTemplate = "<div><h1 class='header'>{{header}}</h1><div class='a'>{{a}}</div><div class='b'>{{b}}</div><div class='c'>{{c}}</div><div class='d'>{{d}}</div><div class='e'>{{e}}</div><div class='f'>{{f}}</div><div class='flatarr'><ul>{{#flatarr}}<li>{{.}}</li>{{/flatarr}}</ul></div>div class='objarr'><ul>{{#objarr}}<li>{{occupation}}:{{name}}</li>{{/objarr}}</ul></div></div>";

  var underscoreTemplate = _.template("<div><h1 class='header'><%=header%></h1><div class='a'><%=a%></div><div class='b'><%=b%></div><div class='c'><%=c%></div><div class='d'><%=d%></div><div class='e'><%=e%></div><div class='f'><%=f%></div><div class='flatarr'><ul><% _.each(flatarr, function(n) { %> <li><%= n %></li> <% }); %></ul></div><div class='objarr'><ul><% _.each(objarr, function(n) { %> <li><%= n.occupation %> : <% n.name %></li> <% }); %></ul></div></div>");

  var dotTemplate =  doT.template("<div><h1 class='header'>{{=it.header}}</h1><div class='a'>{{=it.a}}</div><div class='b'>{{=it.b}}</div><div class='c'>{{=it.c}}</div><div class='d'>{{=it.d}}</div><div class='e'>{{=it.e}}</div><div class='f'>{{=it.f}}</div><div class='flatarr'><ul>{{~it.flatarr :value:index}}<li>{{=value}}!</li>{{~}}</ul></div><div class='objarr'><ul>{{~it.objarr :value:index}}<li>{{=value.occupation}}: {{=value.name}}!</li>{{~}}</ul></div></div>");
 

  var mustacheContainer = document.getElementById("mustache");
  var underscoreContainer = document.getElementById("underscore");
  var handlebarsContainer = document.getElementById("handlebars");
  var dustContainer = document.getElementById("dust");
  var dotContainer = document.getElementById("dot");

  var pureTemplate = $('#pure').directives({
   '.header': 'header',
   '.a': 'a',
   '.b': 'b',
   '.c': 'c',
   '.d': 'd',
   '.e': 'e',
   '.f': 'f',
   '.flatarr': {
     'val<-flatarr':{
       '.':'val'
     }
   },
   '.objarr': {
     'val<-objarr':{
       '.':'val.occupation'
     }
   }
 });
 
  dust.compile("<div><h1 class='header'>{header}</h1><div class='a'>{a}}</div><div class='b'>{b}</div><div class='c'>{c}</div><div class='d'>{d}</div><div class='e'>{e}</div><div class='f'>{f}</div><div class='flatarr'><ul>{#flatarr}<li>{.}</li>{/flatarr}</ul></div>div class='objarr'><ul>{#objarr}<li>{occupation}:{name}</li>{/objarr}</ul></div></div>", 'dustTemplate');

  var handlebarsTemplate = Handlebars.compile("<div><h1 class='header'>{{header}}</h1><div class='a'>{{a}}</div><div class='b'>{{b}}</div><div class='c'>{{c}}</div><div class='d'>{{d}}</div><div class='e'>{{e}}</div><div class='f'>{{f}}</div><div class='flatarr'><ul>{{#each flatarr}}<li>{{this}}</li>{{/each}}</ul></div><div class='objarr'><ul>{{#each objarr}}<li>{{this.occupation}}: {{this.name}}</li>{{/each}}</ul></div></div>");

</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
handlebars
handlebarsContainer.innerHTML = handlebarsTemplate(data);
pending…
mustache
mustacheContainer.innerHTML = Mustache.to_html(mustacheTemplate, data);
pending…
doT
dotContainer.innerHTML = dotTemplate(data);
pending…
underscore
underscoreContainer.innerHTML = underscoreTemplate(data);
pending…
pure
pureTemplate.render(data);
pending…
dust
dustContainer.innerHTML = dust.render('dustTemplate', data, function(){});
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