Mustache style template engine perf

JavaScript performance comparison

Revision 2 of this test case created

Info

LT

Mustache.js

Handlebars.js

templayed.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://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

Test runner

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

Java applet disabled.

Testing in unknown unknown
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. Here’s a list of current revisions for this page:

0 comments

Add a comment