3

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

            }
        });
4

1 に答える 1

1

あなたの理解は正しいです。テンプレートをプリコンパイルすると、クライアント側でコンパイルするよりもコストがかかりません。

あなたは、2 つのビューの間に 0.8 秒の差があったと言っています。この数値は一見小さいように見えますが、より高速な (より優れた?) ユーザー エクスペリエンスを提供するためにすべてが加算されます。テンプレート データが大きくなると、この 2 つの違いがより顕著になるでしょう。

これはあなたに公正な考えを与えるはずです。

于 2013-08-09T18:23:08.530 に答える