Tuna Templates VS Mustache VS Pure VS Underscore VS Handlebars vs ICanHaz

JavaScript performance comparison

Revision 6 of this test case created by Adjusted

Preparation code

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

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

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

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

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js"></script>

<script src="https://raw.github.com/andyet/ICanHaz.js/master/ICanHaz.min.js"></script>

<script src="https://raw.github.com/kononencheg/Tuna-Framework/gh-pages/js/tuna-common.js">
</script>
<script src="https://raw.github.com/kononencheg/Tuna-Framework/gh-pages/js/tuna-templates.js">
</script>

<div id="tuna">
 <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>
</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>
</div>

<div id="underscore"></div>

<div id="mustache"></div>

<div id="handlebars"></div>

<div id="icanhaz"></div>

<div xmlns:tuna style="display: none;">
<tuna:template id="template">
  <tuna:spot tuna:target="header" tuna:path="header" />
  <tuna:spot tuna:target="a" tuna:path="a" />
  <tuna:spot tuna:target="b" tuna:path="b" />
  <tuna:spot tuna:target="c" tuna:path="c" />
  <tuna:spot tuna:target="d" tuna:path="d" />
  <tuna:spot tuna:target="e" tuna:path="e" />
  <tuna:spot tuna:target="f" tuna:path="f" />
</tuna:template>
</div>

<script>
  var data = {
   header: 'Header',
   a: 'aaa',
   b: 'bbb',
   c: 'ccc',
   d: 'ddd',
   e: 'eee',
   f: 'fff'
  };

  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>";

  var iCanHazTemplate = "<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>";

  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>");
  
  var tunaContainer = document.getElementById('tuna');
  var mustacheContainer = document.getElementById("mustache");
  var underscoreContainer = document.getElementById("underscore");
  var handlebarsContainer = document.getElementById("handlebars");
  var iCanHazContainer = document.getElementById("icanhaz");

  var pureTemplate = $('#pure').directives({
   '.header': 'header',
   '.a': 'a',
   '.b': 'b',
   '.c': 'c',
   '.d': 'd',
   '.e': 'e',
   '.f': 'f'
 });
  
  ich.addTemplate('test', iCanHazTemplate);
  
  var tunaTemplate = tuna.tmpl.compileFromMarkup(tunaContainer, 'template');
  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>");

</script>
    

Preparation code output

<script src="https://raw.github.com/pure/pure/master/libs/pure.js"></script> <script src="https://raw.github.com/documentcloud/underscore/master/underscore.js"></script> <script src="https://raw.github.com/janl/mustache.js/master/mustache.js"></script> <script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js"></script> <script src="https://raw.github.com/andyet/ICanHaz.js/master/ICanHaz.min.js"></script> <script src="https://raw.github.com/kononencheg/Tuna-Framework/gh-pages/js/tuna-common.js"> </script> <script src="https://raw.github.com/kononencheg/Tuna-Framework/gh-pages/js/tuna-templates.js"> </script> <div id="tuna"> <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> </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> </div> <div id="underscore"></div> <div id="mustache"></div> <div id="handlebars"></div> <div id="icanhaz"></div> <div xmlns:tuna style="display: none;"> <tuna:template id="template"> <tuna:spot tuna:target="header" tuna:path="header" /> <tuna:spot tuna:target="a" tuna:path="a" /> <tuna:spot tuna:target="b" tuna:path="b" /> <tuna:spot tuna:target="c" tuna:path="c" /> <tuna:spot tuna:target="d" tuna:path="d" /> <tuna:spot tuna:target="e" tuna:path="e" /> <tuna:spot tuna:target="f" tuna:path="f" /> </tuna:template> </div> <script> var data = { header: 'Header', a: 'aaa', b: 'bbb', c: 'ccc', d: 'ddd', e: 'eee', f: 'fff' }; 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>"; var iCanHazTemplate = "<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>"; 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>"); var tunaContainer = document.getElementById('tuna'); var mustacheContainer = document.getElementById("mustache"); var underscoreContainer = document.getElementById("underscore"); var handlebarsContainer = document.getElementById("handlebars"); var iCanHazContainer = document.getElementById("icanhaz"); var pureTemplate = $('#pure').directives({ '.header': 'header', '.a': 'a', '.b': 'b', '.c': 'c', '.d': 'd', '.e': 'e', '.f': 'f' }); ich.addTemplate('test', iCanHazTemplate); var tunaTemplate = tuna.tmpl.compileFromMarkup(tunaContainer, 'template'); 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>"); </script>

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
Tuna Templates
tunaTemplate.processTransform(data);
pending…
Pure
pureTemplate.render(data);
pending…
Underscore
underscoreContainer.innerHTML = underscoreTemplate(data);
pending…
Mustache
mustacheContainer.innerHTML = Mustache.to_html(mustacheTemplate, data);
pending…
Handlebars
handlebarsContainer.innerHTML = handlebarsTemplate(data);
pending…
ICanHaz
$(iCanHazContainer).empty().append(ich.test(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