Ember.js模板绑定性能

Question

我们有一个页面，其中包含一个包含26行的表。 每行将包含一个<input>或<select>元素，具体取决于我们要绑定到的数据。 当绑定到包含5-30个选项的元素时，渲染页面大约需要5秒钟。 如果删除绑定，页面将在一秒钟内呈现。

绑定到Ember.Select视图时是否存在已知的性能问题？ 或者，我可能做错了吗？ 我正在使用Firefox22。IE9的运行速度大约是它的两倍。 在此期间，CPU未挂住。 我正在使用余烬1.0rc6。

模板代码段：

{{#if pa.isPickList}}
    {{view Ember.Select viewName="select" contentBinding="pa.options" selectionBinding="pa.selected"}}
{{else}}
    {{input valueBinding="pa.selected"}}
{{/if}}

我担心我如何获取模型的异步特性可能会导致效率低下。 绑定和异步事件可能交互效率低下。

Salesforce.com是后端。 从对Promise的了解很少，我想知道是否需要在Promise中获取服务器数据。 我不确定该怎么做。

这是我目前在Route中获取数据的方式：

App.IndexRoute = Ember.Route.extend({
    model: function(params){
        var otherController = this.controllerFor('selectedProducts');

        var ar = Ember.A(); //create an array
        var arg = '0067000000PNWrV';

        Visualforce.remoting.Manager.invokeAction(
            '{!$RemoteAction.ProductPricingLookupController.loadOpportunityProducts}',
            arg,
            function myHandler(result, event) { 
            console.info('got results!!! ' + result.length); 
            for(var i = 0; i < result.length; i++)
            {
                var p = result[i];
                var sfProd = App.ProductResult.create({content: p});
                ar.pushObject(sfProd);
            }
            },
            {escape: false} //some of the names have ampersands!!
        );        

        return ar;
    }
}

在此先感谢您帮助新手学习javascript和Ember的方法。

更新 这里是此问题的有效示例 。 我有5个选择列表，每个列表有60个选项。 在我的计算机上渲染需要2-3秒的时间。 我意识到这些数字很大，但希望不是不合理的。 增加选择列表元素或选项的数量，您可以轻松达到5秒。

另外，将我的服务器模型获取移至一个承诺不会影响性能。

安德鲁

Answer 1

如果没有在探查器中查看，就很难猜测这样的性能问题。 您可以尝试在Chrome开发者工具中创建配置文件，以了解哪种方法花费的时间最多。 或创建一个具有相同问题的jsbin。

一个潜在的问题是，绑定连接的同时正在构建您绑定到的阵列。 rc.6应该不是问题。 您正在使用什么版本的Ember？

关于promise，您的model挂钩应该返回一个包装了异步调用的promise，就像这样。

model: function(params) {
  var promise = Ember.Deferred.create();
  var myHandler = function(result, event) {
    var model = Ember.A();

    // populate the model

    promise.resolve(model)
  }

  var arg = '0067000000PNWrV';
  Visualforce.remoting.Manager.invokeAction(..., myHandler);

  return promise;
}

如果绑定触发得太早/经常，那么按这样的承诺加载模型会有所帮助。

最后，尝试将Ember.STRUCTURED_PROFILE设置为true。 这将准确显示模板渲染所需的时间。

编辑：jsfiddle之后

我进一步研究了这一点。 这是Ember.Select的已知问题 。 默认实现为select内的每个选项创建SelectOption视图，以允许对选项项本身进行数据绑定。 创建这么多视图需要花费很多时间。

但是，典型用法很少需要仅将选项项绑定到整个列表本身。 这似乎是弥合性能差距的常用方法。

我找到了一个使用option标签而不是SelectOption视图的要点 。

这是您更新的jsfiddle 。 我将清单增加到10个，每个清单有100个项目。 现在，该列表将在约150ms内呈现给我。