DOM vs innerHTML based Templating

JavaScript performance comparison

Revision 1000 of this test case created by

Preparation code

<script src="http://twitter.github.io/hogan.js/builds/3.0.1/hogan-3.0.1.js"></script>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://www.jsviews.com/download/jsrender.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js"></script>

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

<script src="http://pure.github.io/pure/libs/pure.js"></script>

<script src="http://documentcloud.github.com/underscore/underscore.js"></script>

<script src="http://mustache.github.com/extras/mustache.js"></script>

<script src="https://rawgit.com/flatiron/plates/master/lib/plates.js">
</script>

<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 id="theTmpl" type="text/x-jsrender">
<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>
</script>

<script>
  window.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>";
  
  window.underscoreTemplate = _.template("<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>");
  
  window.sharedVariables = {
   header: "Header",
   a: 'aaa',
   b: 'bbb',
   c: 'ccc',
   d: 'ddd',
   e: 'eee',
   f: 'fff'
  };


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

var template = Handlebars.compile(mustacheTemplate);

var templateHogan = Hogan.compile(mustacheTemplate);

</script>


    

Preparation code output

<script src="http://code.jquery.com/jquery.js"></script> <script src="http://www.jsviews.com/download/jsrender.js"></script> <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="http://pure.github.io/pure/libs/pure.js"></script> <script src="http://documentcloud.github.com/underscore/underscore.js"></script> <script src="http://mustache.github.com/extras/mustache.js"></script> <script src="https://rawgit.com/flatiron/plates/master/lib/plates.js"> </script> <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 id="theTmpl" type="text/x-jsrender"> <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> </script> <script> window.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>"; window.underscoreTemplate = _.template("<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>"); window.sharedVariables = { header: "Header", a: 'aaa', b: 'bbb', c: 'ccc', d: 'ddd', e: 'eee', f: 'fff' }; var html = "<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>"; var template = Handlebars.compile(mustacheTemplate); var templateHogan = Hogan.compile(mustacheTemplate); </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
Hogan
templateHogan.render(sharedVariables);
pending…
Handlebars
template(sharedVariables);
pending…
Mustache.js Template
Mustache.to_html(mustacheTemplate, sharedVariables);
pending…
Pure JS Template
$('.purejs_template').autoRender(sharedVariables);
pending…
Underscore.js Template
underscoreTemplate(sharedVariables);
pending…
Plates
Plates.bind(html, sharedVariables); 
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