Simple Shootout in redering elementns (v1042)

Revision 1042 of this benchmark created on

Description

Performance test for * Mustache.js * Handlebars.js (on-the-fly vs. precompiled) * Dust.js (on-the-fly vs. precompiled)

Preparation HTML

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.8.1/mustache.min.js"></script>
<script type="text/javascript" src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars.runtime-v3.0.1.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.2/handlebars.min.js"></script>
<script type="text/javascript" src="https://raw.githubusercontent.com/linkedin/dustjs/master/dist/dust-full.min.js"></script>

<script>
    window.sharedVariables = {
        header: "Header",
        a: 'aaa',
        b: 'bbb',
        c: 'ccc',
        d: 'ddd',
        e: 'eee',
        f: 'fff'
    };

    (function (dust) {
        dust.register("dustTemplatePrecompiled", body_0);
        function body_0(chk, ctx) {
            return chk.w("<div><h1 class='header'>").f(ctx.get(["header"], false), ctx, "h").w("</h1><div class='a'>").f(ctx.get(["a"], false), ctx, "h").w("</div><div class='b'>").f(ctx.get(["b"], false), ctx, "h").w("<div class='c'>").f(ctx.get(["c"], false), ctx, "h").w("<div class='d'>").f(ctx.get(["d"], false), ctx, "h").w("<div class='e'>").f(ctx.get(["e"], false), ctx, "h").w("<div class='f'>").f(ctx.get(["f"], false), ctx, "h").w("</div></div></div></div></div></div>\";");
        }

        body_0.__dustBody = !0;
        return body_0
    }(dust));

(function() {
  var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {};
templates['handlebarsTemplatePrecompiled'] = template({"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
    var helper, alias1=helpers.helperMissing, alias2="function", alias3=this.escapeExpression;

  return "<div><h1 class='header'>"
    + alias3(((helper = (helper = helpers.header || (depth0 != null ? depth0.header : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"header","hash":{},"data":data}) : helper)))
    + "</h1>\n\n    <div class='a'>"
    + alias3(((helper = (helper = helpers.a || (depth0 != null ? depth0.a : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"a","hash":{},"data":data}) : helper)))
    + "</div>\n    <div class='b'>"
    + alias3(((helper = (helper = helpers.b || (depth0 != null ? depth0.b : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"b","hash":{},"data":data}) : helper)))
    + "\n        <div class='c'>"
    + alias3(((helper = (helper = helpers.c || (depth0 != null ? depth0.c : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"c","hash":{},"data":data}) : helper)))
    + "\n            <div class='d'>"
    + alias3(((helper = (helper = helpers.d || (depth0 != null ? depth0.d : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"d","hash":{},"data":data}) : helper)))
    + "\n                <div class='e'>"
    + alias3(((helper = (helper = helpers.e || (depth0 != null ? depth0.e : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"e","hash":{},"data":data}) : helper)))
    + "\n                    <div class='f'>"
    + alias3(((helper = (helper = helpers.f || (depth0 != null ? depth0.f : depth0)) != null ? helper : alias1),(typeof helper === alias2 ? helper.call(depth0,{"name":"f","hash":{},"data":data}) : helper)))
    + "</div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n";
},"useData":true});
})();



    window.mustacheTemplate = "<div><h1 class='header'>{{header}}</h1><div class='a'>{{a}}</div><div class='b'>{{b}}<div class='c'>{{c}}<div class='d'>{{d}}<div class='e'>{{e}}<div class='f'>{{f}}</div></div></div></div></div></div>";
    window.handlebarsTemplate = "<div><h1 class='header'>{{header}}</h1><div class='a'>{{a}}</div><div class='b'>{{b}}<div class='c'>{{c}}<div class='d'>{{d}}<div class='e'>{{e}}<div class='f'>{{f}}</div></div></div></div></div></div>";
    window.dustTemplateRendered =  "<div><h1 class='header'>{header}</h1><div class='a'>{a}</div><div class='b'>{b}<div class='c'>{c}<div class='d'>{d}<div class='e'>{e}<div class='f'>{f}</div></div></div></div></div></div>";
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Mustache.js
Mustache.to_html(mustacheTemplate, sharedVariables);
ready
Handlebars.js Rendered
Handlebars.compile(window.handlebarsTemplate)(window.sharedVariables)
ready
Dust.js Template Precompiled
dust.render("dustTemplatePrecompiled", window.sharedVariables, function (err, out) {});
ready
Dust.js Template Rendered
dust.renderSource(window.dustTemplateRendered, window.sharedVariables, function(err, out) {});
ready
Handlebars.js Precompiled
Handlebars.templates.handlebarsTemplatePrecompiled(window.sharedVariables);
ready

Revisions

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