Mustache style template engine perf

JavaScript performance comparison

Revision 2 of this test case created by

Preparation code

<script src="https://rawgithub.com/rhyzx/lt/master/lt.js"></script>
<script src="https://rawgithub.com/janl/mustache.js/master/mustache.js"></script>
<script src="https://rawgithub.com/wycats/handlebars.js/master/dist/handlebars.js"></script>
<script src="https://rawgithub.com/archan937/templayed.js/master/src/templayed.js"></script>
      
<script>
Benchmark.prototype.setup = function() {
  var bench = [{ // non
      source: 'Hello world',
      data: {}
  }, { // basic
      source: 'Hello {{name}}! You have {{count}} new messages.',
      data:   { name: 'Mick', count: 30 }
  }, { // if
      source: '{{#check}}pass{{/check}}',
      data:   { check: true }
  }, { // use obj
      source: '{{#person}}{{name}}{{age}}{{/person}}',
      data:   { person: { name: 'Larry', age: 45 } }
  }, { // iterator list
      source: '{{#names}}{{name}}{{/names}}',
      data:   { names: [{name: 'Moe'}, {name: 'Larry'}, {name: 'Curly'}, {name: 'Shemp'}] }
  }, { // invert
      source: '{{^not}}show me the money{{/not}}',
      data:   { not: false }
  }, { // complex
      source: (function () {/*
          <header>{{header}}</header>
          <ul>
          {{#items}}
              <li>{{name}} : {{value}}</li>
          {{/items}}
          </ul>
          {{#footer}}
          <footer>{{footer}}</footer>
          {{/footer}}
      */}).toString().slice(16, -4),
      data:   { header: 'this is header', items: [
          {name: 'a'}, {name: 'b'}, {name: 'c'}, {name: 'd'}, {name: 'e'},
          {name: 'a'}, {name: 'b'}, {name: 'c'}, {name: 'd'}, {name: 'e'},
          {name: 'a'}, {name: 'b'}, {name: 'c'}, {name: 'd'}, {name: 'e'}
      ]}
  }]
  
  // pre-compile
  for (var i=0, len=bench.length; i<len; i++) {
      var item = bench[i]
      item.lt = lt.compile(item.source)
      item.mustache = Mustache.compile(item.source)
      item.handlebars = Handlebars.compile(item.source)
      item.handlebars({}) // disable Handlebar lazy-compile
      item.templayed = templayed(item.source)
  }
  

};
</script>

Preparation code output

<script src="https://rawgithub.com/janl/mustache.js/master/mustache.js"></script> <script src="https://rawgithub.com/wycats/handlebars.js/master/dist/handlebars.js"></script> <script src="https://rawgithub.com/archan937/templayed.js/master/src/templayed.js"></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
compile#LT
for (var i=0, len=bench.length; i<len; i++) {
    var item = bench[i]
    item.lt = lt.compile(item.source)
}
pending…
compile#Mustache
for (var i=0, len=bench.length; i<len; i++) {
    var item = bench[i]
    item.mustache = Mustache.compile(item.source)
    // mustache will cache compiled tempate
    Mustache.clearCache()
}
pending…
compile#Handlebars
for (var i=0, len=bench.length; i<len; i++) {
    var item = bench[i]
    // Handlebars #compile will not compile template until render called
    item.handlebars = Handlebars.template(Handlebars.precompile(item.source))
}
pending…
compile#Templayed
for (var i=0, len=bench.length; i<len; i++) {
    var item = bench[i]
    item.templayed = templayed(item.source)
}
pending…
render#LT
for (var i=0, len=bench.length; i<len; i++) {
    var item = bench[i]
    item.result = item.lt(item.data)
}
pending…
render#Mustache
for (var i=0, len=bench.length; i<len; i++) {
    var item = bench[i]
    item.result = item.mustache(item.data)
}
pending…
render#Handlebars
for (var i=0, len=bench.length; i<len; i++) {
    var item = bench[i]
    item.result = item.handlebars(item.data)
}
pending…
render#Templayed
for (var i=0, len=bench.length; i<len; i++) {
    var item = bench[i]
    item.result = item.templayed(item.data)
}
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