javascript - mustache 渲染与 Handlebars 渲染

Question

我有 2 个 View - view1 使用 Mustache，view2 使用 Handlebars。 我想验证一下我的理解是否正确——

在调用 View 的渲染函数时，渲染 view2 的性能将优于 view1，因为我在初始化 block 中编译了 Handlebars 模板，并且在渲染 View 时我将数据传递给已编译 模板。

而在 view1 使用 Mustache 的情况下，模板编译和数据填充发生在渲染期间。

请让我知道我的理解是否正确。我尝试检查 View 的加载时间，但没有发现加载时间有任何显着差异。 view1 为 10.8 ms，view2 为 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

你的理解是正确的。与在客户端编译模板相比，预编译模板的操作成本更低。

你说两个 View 之间有 0.8 秒的差异。尽管这个数字看似很小，但所有这些加在一起可以为您提供更快(更好？)的用户体验。一旦模板数据更大，您可能会看到两者之间更显着的差异。

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