1

26 行のテーブルを含むページがあります。バインド先のデータに応じて、各行には<input>または要素が含まれます。<select>5 ～ 30 個のオプションを含む要素にバインドする場合、ページのレンダリングに約 5 秒かかります。バインディングを削除すると、ページは 1 秒以内にレンダリングされます。

Ember.Select ビューにバインドするときの既知のパフォーマンスの問題はありますか? または、私はそれを間違ってやっている可能性がありますか？Firefox 22 を使用しています。IE9 は約 2 倍遅いです。この間、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 です。プロミスについて私が知っていることはほとんどないので、プロミスでサーバーデータを取得する必要があるかどうか疑問に思っています。これを行う方法がわかりません。

現在、ルートでデータを取得している方法は次のとおりです。

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の方法を学ぶのを手伝ってくれてありがとう.

Update Here は、この問題の実際の例です。それぞれ 60 のオプションを持つ 5 つのピックリストがあります。これは、私のマシンでレンダリングするのに 2 ～ 3 秒かかります。これらはかなり大きな数であることは理解していますが、不合理ではないことを願っています. 選択リストの要素またはオプションの数を増やすと、簡単に 5 秒に達することができます。

また、server-model-fetching を promise に移動しても、パフォーマンスには影響しませんでした。

アンドリュー

4

1 に答える 1

1

プロファイラーで見ずに、このようなパフォーマンスの問題を推測するのは少し難しいです。Chrome 開発ツールでプロファイルを作成してみて、どのメソッドが最も時間がかかっているかを確認できます。または、同じ問題がある jsbin を作成します。

潜在的な問題の 1 つは、バインド先の配列が、バインドの接続時に同時に構築されることです。これは rc.6 では問題になりません。Ember のどのバージョンを使用していますか?

promise に関しては、modelフックは async 呼び出しをラップする 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;
}

バインディングがあまりにも早く/頻繁に起動する場合は、このような promise でモデルをロードすると役立ちます。

最後Ember.STRUCTURED_PROFILEにtrueに設定してみてください。これにより、テンプレートのレンダリングにかかる​​時間が正確に示されます。

編集：jsfiddleの後

これをもう少し掘り下げました。これはEmber.Selectの既知の問題です。デフォルトの実装ではSelectOption、select 内の各オプションのビューを作成して、オプション項目自体のデータバインディングを許可します。これらの多くのビューを作成するには、時間がかかります。

ただし、一般的な使用法では、オプション項目をリスト全体にのみバインドする必要はほとんどありません。そして、これがパフォーマンスのギャップを埋める一般的な方法のようです。

ビューの代わりにタグを使用する要点を見つけました。optionSelectOption

これが更新されたjsfiddleです。リストをそれぞれ 100 項目ずつ 10 に増やしました。現在、リストは約 150 ミリ秒でレンダリングされます。

于 2013-07-12T03:54:21.227 に答える