Simple Shootout in redering elementns

JavaScript performance comparison

Revision 1042 of this test case created by

Preparation code

<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>
    

Preparation code output

<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

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
Mustache.js
Mustache.to_html(mustacheTemplate, sharedVariables);
pending…
Handlebars.js Rendered
Handlebars.compile(window.handlebarsTemplate)(window.sharedVariables)
pending…
Dust.js Template Precompiled
dust.render("dustTemplatePrecompiled", window.sharedVariables, function (err, out) {});
pending…
Dust.js Template Rendered
dust.renderSource(window.dustTemplateRendered, window.sharedVariables, function(err, out) {});
pending…
Handlebars.js Precompiled
Handlebars.templates.handlebarsTemplatePrecompiled(window.sharedVariables);
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