小胡子渲染与车把渲染

Question

我有2个视图 - 使用Mustache查看view1，使用Handlebars查看view2。 我想验证我的理解是否正确 -

在调用视图的渲染函数时，渲染view2的性能将优于view1，因为我在初始化块中编译了Handlebars模板，并且在渲染视图时我将数据传递给编译的< / strong>模板。

如果view1使用Mustache，则在渲染过程中会发生模板编译和数据填充。

如果我的理解是正确的，请告诉我。我试图检查视图的加载时间，并没有在加载时间上有任何显着差异。对于view1，它是10.8毫秒，view2是10毫秒。

 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

您的理解是正确的。预编译模板比在客户端编译模板更便宜。

你说两个观点之间有0.8秒的差异。虽然这个数字似乎很小，但它总能为您提供更快（更好？）的用户体验。一旦模板数据较大，您可能会发现两者之间存在更显着的差异。

This应该给你一个公平的想法。