1

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

绑定到 Ember.Select 视图时是否存在已知的性能问题？或者，我可能做错了吗？我正在使用 Firefox 22。IE9 的速度大约是原来的两倍。在此期间 CPU 未固定。我正在使用 ember 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 中获取服务器数据。我不知道该怎么做。

以下是我目前在我的路线中获取数据的方式：

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 秒。

此外，将我的 server-model-fetching 移至 promise 不会影响性能。

安德鲁

4

1 回答 1

1

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

一个潜在的问题是，您绑定到的数组是在连接绑定的同时构建的。这不应该是 rc.6 的问题。您使用的是哪个版本的 Ember？

关于承诺，你的model钩子应该返回一个包装你的异步调用的承诺，就像这样。

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的一个已知问题。默认实现SelectOption为 select 中的每个选项创建视图，以允许选项项本身的数据绑定。创建这么多视图需要时间。

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

我发现了一个使用标签而不是视图的要点。optionSelectOption

这是您更新的jsfiddle。我将列表增加到 10 个，每个包含 100 个项目。该列表现在为我呈现大约 150 毫秒。

于 2013-07-12T03:54:21.227 回答