Tempreites vs Mustache vs Plates (v4)

Revision 4 of this benchmark created on

Preparation HTML

<script src="https://rawgithub.com/flatiron/plates/master/lib/plates.js"></script>
<script src="http://rawgithub.com/janl/mustache.js/master/mustache.js"></script>
<script src="https://raw.github.com/fiatjaf/tempreites/master/tempreites.min.js"></script>

Setup

var data = {
      name: "Joe",
      birth: "1974-04-23",
      sons: [
        { name: "Alfred", birth: "1996-08-12" },
        { name: "James", birth: "2002-01-05" }
      ],
      wife: "Carmen"
    }
    
    var listdata = {
      numbers: [],
      results: []
    }
    
    for (var i = 0; i < 100; i++) {
      listdata.numbers.push({
        number: i,
      })
      listdata.results.push({
        multiple: i*23,
        string: '' + i
      })
    }
    
    var smallmustachetemplate = '<p>name: {{name}}</p><p>birth: {{birth}}</p><ul>{{#sons}}<li>name: {{name}}, birth: {{birth}}</li>{{/sons}}</ul><p>wife: {{wife}}</span></p>'
    
    var smalltempreite = '<p>name: <span class="name"></span></p><p>birth: <span class="birth"></span></p><ul class="sons"><li>name: <span class="name"></span>, birth: <span class="birth"></span></li></ul><p>wife: <span class="wife"></span></p>'
    
    var mustachetemplate = '<ul>{{#numbers}}<li>{{number}}</li>{{/numbers}}</ul><ul>{{#results}}<li>{{multiple}}, {{string}}</li>{{/results}}</ul>'
    
    var tempreite = '<ul class="numbers"><li class="number"></li></ul><ul class="results"><li><span class="multiple"></span><span class="string"></span></li></ul>'

Test runner

Ready to run.

Testing in
TestOps/sec
Mustache rendering a standard small object
var output = Mustache.render(smallmustachetemplate, data);
ready
Tempreites rendering a standard small object
var output = Tempreites.render(smalltempreite, data);
ready
Plates rendering a standard small object
var output = Plates.bind(smalltempreite, data);
ready
Mustache rendering an object with long lists
var output = Mustache.render(mustachetemplate, listdata);
ready
Tempreites rendering an object with long lists
var output = Tempreites.render(tempreite, listdata);
ready
Plates rendering an object with long lists
var output = Plates.bind(tempreite, listdata);
ready

Revisions

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