DOM vs innerHTML based Templating (v418)

Revision 418 of this benchmark created by Sergey Kononenko on

Description

A brief comparison of some JavaScript templating engines on a short template: 7 DOM nodes ... 7 interpolated values.

Preparation HTML

<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="http://documentcloud.github.com/underscore/underscore.js"></script>

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

<script type="text/javascript" src="https://raw.github.com/douglascrockford/JSON-js/master/json2.js">
</script>

<script type="text/javascript" src="https://raw.github.com/jquery/sizzle/master/sizzle.js">
</script>

<script type="text/javascript" src="https://github.com/downloads/kononencheg/Tuna-Common/tuna-common.js">
</script>

<script type="text/javascript" src="https://github.com/downloads/kononencheg/Tuna-Templates/tuna-templates.js">
</script>

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

<div class="purejs_template">
 <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="tuna">
 <div>
  <h1 class="t-header"></h1>
  <div class='t-a'></div>
  <div class='t-b'></div>
  <div class='t-c'></div>
  <div class='t-d'></div>
  <div class='t-e'></div>
  <div class='t-f'></div>
 </div>
</div>

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

<script>

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

  var mustacheContainer = document.getElementById("mustache");
  var underscoreContainer = document.getElementById("underscore");

  var tunaContainer = document.getElementById('tuna');
  var template = tuna.tmpl.compileFromMarkup(tunaContainer, 'template');
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Mustache.js Template
mustacheContainer.innerHTML = Mustache.to_html(mustacheTemplate, sharedVariables);
 
ready
Pure JS Template
$('.purejs_template').autoRender(sharedVariables);
ready
Underscore.js Template
underscoreContainer.innerHTML = underscoreTemplate(sharedVariables);
ready
Tuna Templates
template.processTransform(sharedVariables);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.