Mustache style template engine perf

JavaScript performance comparison

Revision 5 of this test case created

Info

LT

Mustache.js

Handlebars.js

templayed.js

Hogan.js

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://github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.min.js"></script>
<script src="https://rawgithub.com/archan937/templayed.js/master/src/templayed.js"></script>
<script src="https://rawgithub.com/twitter/hogan.js/master/web/1.0.0/hogan.min.js"></script>
<script src="https://rawgithub.com/akdubya/dustjs/master/dist/dust-full-0.3.0.min.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.hogan = Hogan.compile(item.source)
    //    item.mustache = Mustache.parse(item.source)
        item.handlebars = Handlebars.compile(item.source)
    //    item.handlebars({}) // disable Handlebar lazy-compile
    //    item.templayed = templayed(item.source)
    }
   
};
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
#Hogan.js
for (var i=0, len=bench.length; i<len; i++) {
    var item = bench[i]
    item.result = Hogan.compile(item.source).render(item.data)
}
pending…
#Mustache
for (var i=0, len=bench.length; i<len; i++) {
    var item = bench[i]
    item.result = Mustache.render(item.source, item.data)
    // mustache will cache compiled tempate
    //Mustache.clearCache()
}
pending…
#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.result = Handlebars.compile(item.source)(item.data)
}
pending…
#Templayed
for (var i=0, len=bench.length; i<len; i++) {
    var item = bench[i]
    item.result = templayed(item.source)(item.data)
}
pending…
#LT
for (var i=0, len=bench.length; i<len; i++) {
    var item = bench[i]
    item.result = lt.compile(item.source).render(item.data)
}
pending…
#LT - precompiled
for (var i=0, len=bench.length; i<len; i++) {
    var item = bench[i]
    item.result = item.lt.render(item.data)
}
pending…
#Hogan.js - precompiled
for (var i=0, len=bench.length; i<len; i++) {
    var item = bench[i]
    item.result = item.hogan.render(item.data)
}
pending…
#Dust.js
for (var i=0, len=bench.length; i<len; i++) {
    var item = bench[i]
    dust.compile(item.source, "test"+i);
    item.result = dust.render('intro'+i, item.data, function(err, out) {});
}
pending…
Handlebars.js precompiled
for (var i=0, len=bench.length; i<len; i++) {
    var item = bench[i]
    item.result = item.handlebars(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. Here’s a list of current revisions for this page:

0 comments

Add a comment