Mustache rendering Vs Handlebars rendering

Question

I have 2 views - view1 using Mustache and view2 using Handlebars. I want to verify if my understanding is right -

While calling the render function of the views, the performance of rendering view2 will be better than view1 as I have compiled the Handlebars template in the initialize block and while rendering the view I am passing the data to the compiled template.

Whereas in case of view1 using Mustache, the template compilation and data population happens during rendering.

Please let me know if my understanding is correct. I tried to check the load time of the views and did not get any significant difference in the load time. For view1 it was 10.8 ms and view2 was 10 ms.

 var view1 = Backbone.View.extend({

            initialize:function(options){

                 Backbone.View.prototype.initialize.call(this);

                 this.tpl = options.template;

                 this.data = options.data;

            },


            render: function(){

                 $(this.el).html(Mustache.to_html(this.tpl,this.data));

            }
        });


 var view2 = Backbone.View.extend({

            initialize:function(options){

                  Backbone.View.prototype.initialize.call(this);

                  this.tpl = options.template;

                  this.handlebarstpl = Handlebars.compile(this.tpl);

                  this.data = options.data;

            },


            render: function(){

                 $(this.el).html(this.handlebarstpl(this.data));

            }
        });

Answer 1

Your understanding is correct. Precompiling your templates is a less expensive operation than compiling it on the client's end.

You say that there was a 0.8 second difference between the two views. Although this number is seemingly small, it all adds up in giving you a faster (better?) user experience. You will probably see a more significant difference between the two once the template data is larger.

This should give you a fair idea.