doT.js vs Mustache.js vs plain html

Benchmark created by foo bar on

Description

Appending HTML to the page with doT, Mustache and native Javascript

Preparation HTML

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

<script>
    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',
  '1', '2', '3', '4', '5', '6', '7', '8', '9', '10',
  '1', '2', '3', '4', '5', '6', '7', '8', '9', '10',
  '1', '2', '3', '4', '5', '6', '7', '8', '9', '10',
  '1', '2', '3', '4', '5', '6', '7', '8', '9', '10',
  '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.doTtemplate = doT.template("<div><h1 class='header'>{{=it.header}}</h1><h2 class='header2'>{{=it.header2}}</h2><h3 class='header3'>{{=it.header3}}</h3><h4 class='header4'>{{=it.header4}}</h4><h5 class='header5'>{{=it.header5}}</h5><h6 class='header6'>{{=it.header6}}</h6><ul class='list'>{{ for (var i = 0, l = it.list.length; i < l; i++) { }}<li class='item'>{{=it.list[i]}}</li>{{ } }}</ul></div>");
  var result = document.getElementById('result');
</script>
<style>#result {display:none;}</style>

<div id="result"></div>

Test runner

Ready to run.

Testing in
TestOps/sec
doT
result.innerHTML = doTtemplate(sharedVariables);
ready
mustache
result.innerHTML = Mustache.to_html(mustacheTemplate, sharedVariables);
ready
plain html
result.innerHTML = '<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"><li class="item">1</li><li class="item">2</li><li class="item">3</li><li class="item">4</li><li class="item">5</li><li class="item">6</li><li class="item">7</li><li class="item">8</li><li class="item">9</li><li class="item">10</li><li class="item">1</li><li class="item">2</li><li class="item">3</li><li class="item">4</li><li class="item">5</li><li class="item">6</li><li class="item">7</li><li class="item">8</li><li class="item">9</li><li class="item">10</li><li class="item">1</li><li class="item">2</li><li class="item">3</li><li class="item">4</li><li class="item">5</li><li class="item">6</li><li class="item">7</li><li class="item">8</li><li class="item">9</li><li class="item">10</li><li class="item">1</li><li class="item">2</li><li class="item">3</li><li class="item">4</li><li class="item">5</li><li class="item">6</li><li class="item">7</li><li class="item">8</li><li class="item">9</li><li class="item">10</li><li class="item">1</li><li class="item">2</li><li class="item">3</li><li class="item">4</li><li class="item">5</li><li class="item">6</li><li class="item">7</li><li class="item">8</li><li class="item">9</li><li class="item">10</li><li class="item">1</li><li class="item">2</li><li class="item">3</li><li class="item">4</li><li class="item">5</li><li class="item">6</li><li class="item">7</li><li class="item">8</li><li class="item">9</li><li class="item">10</li></ul></div>'
ready

Revisions

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