JavaScript template language shootoff (v752)

Revision 752 of this benchmark created on

Description

A limited comparison of some popular JavaScript templating engines on a short template: 6 header tags, and 10 list items. Compared templating engines:

Preparation HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script src="http://documentcloud.github.com/underscore/underscore.js">
</script>
<!--NOTE: Need to load from CDNJS since GitHub uses text/plain MIME type, which
is blocked in IE9-->
<!--<script src="http://github.com/janl/mustache.js/raw/master/mustache.js"></script>-->
<script src="http://ajax.cdnjs.com/ajax/libs/mustache.js/0.3.0/mustache.min.js">
</script>
<script src="https://github.com/downloads/wycats/handlebars.js/handlebars.1.0.0.beta.3.js">
</script>
<script src="http://cdn.kendostatic.com/2011.2.804/js/kendo.all.min.js">
</script>
<script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js">
</script>
<!--NOTE: Need to load from MSFT CDN since GitHub uses text/plain MIME type, which
is blocked in IE9-->
<!--<script src="http://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.min.js"></script>-->
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js">
</script>
<script src="http://qatrix.com/js/qatrix-1.1.min.js">
</script>
<script>
  var $ = jQuery.noConflict();
  window.sharedVariables = {
    header: "Header",
    header2: "Header2",
    header3: "Header3",
    header4: "Header4",
    header5: "Header5",
    header6: "Header6",
    list: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
  };

  window.mustacheTemplate = "<div><h1 class='header'>{{{header}}}</h1><h2 class='header2'>{{{header2}}}</h2><h3 class='header3'>{{{header3}}}</h3><h4 class='header4'>{{{header4}}}</h4><h5 class='header5'>{{{header5}}}</h5><h6 class='header6'>{{{header6}}}</h6><ul class='list'>{{#list}}<li class='item'>{{{.}}}</li>{{/list}}</ul></div>";


  window.handlebarsTemplate = Handlebars.compile("<div><h1 class='header'>{{header}}</h1><h2 class='header2'>{{header2}}</h2><h3 class='header3'>{{header3}}</h3><h4 class='header4'>{{header4}}</h4><h5 class='header5'>{{header5}}</h5><h6 class='header6'>{{header6}}</h6><ul class='list'>{{#each list}}<li class='item'>{{this}}</li>{{/each}}</ul></div>");

    var html = $('<div><h1 class="header"></h1><h2 class="header2 "></h2><h3 class="header3 "></h3><h4 class="header4 "></h4><h5 class="header5 "></h5><h6 class="header6 "></h6><ul class="list "></ul></div>');
  window.jqueryTemplate = function(d) {
    html.find('h1').text(d.header);
    html.find('h2').text(d.header2);
    html.find('h3').text(d.header3);
    html.find('h4').text(d.header4);
    html.find('h5').text(d.header5);
    html.find('h6').text(d.header6);
    var ul = html.find('ul');
    for (var i = 0; i < d.list.length; i++) {
      ul.append('<li class="item">' + d.list[i] + '</li>');
      }
    }

    window.domTemplate = function(d) {
      var e1 = document.createElement('div');
      var e2 = document.createElement('h1');
      e2.className = 'header';
      e2.appendChild(document.createTextNode(d.header));
      e1.appendChild(e2);
      e2 = document.createElement('h2');
      e2.className = 'header2';
      e2.appendChild(document.createTextNode(d.header2));
      e1.appendChild(e2);
      e2 = document.createElement('h3');
      e2.className = 'header3';
      e2.appendChild(document.createTextNode(d.header3));
      e1.appendChild(e2);
      e2 = document.createElement('h4');
      e2.className = 'header4';
      e2.appendChild(document.createTextNode(d.header4));
      e1.appendChild(e2);
      e2 = document.createElement('h5');
      e2.className = 'header5';
      e2.appendChild(document.createTextNode(d.header5));
      e1.appendChild(e2);
      e2 = document.createElement('h6');
      e2.className = 'header6';
      e2.appendChild(document.createTextNode(d.header6));
      e1.appendChild(e2);
      e2 = document.createElement('ul');
      e2.className = 'list';
      for (var i1 = 0; i1 < d.list.length; i1++) {
        e3 = document.createElement('li');
        e3.className = 'list';
        e3.appendChild(document.createTextNode(d.list[i1]));
        e2.appendChild(e3)
      }
      e1.appendChild(e2);
      return e1;
    };

    window.toDom = function(string) {
      var a = document.createElement('div');
      a.innerHTML = string;
      return a.firstChild;
    }
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Mustache
toDom(Mustache.to_html(mustacheTemplate, sharedVariables));
ready
Jquery low level template
jqueryTemplate(sharedVariables);
ready
Handlebars
handlebarsTemplate(sharedVariables);
ready
dom template
domTemplate(sharedVariables);
ready

Revisions

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