過去 6 か月間、私は Emberjs コンポーネントを開発しています。
テーブルコンポーネントを開発しようとしたとき、最初にパフォーマンスの問題が発生しました。このテーブルの各セルは Ember.View で、各セルにはオブジェクト プロパティへのバインディングがありました。テーブルに 6 列があり、約 100 項目をリストしようとすると、ブラウザーがしばらくフリーズする原因になりました。そのため、ハンドルバーを使用する代わりに文字列を返す関数を記述し、オブザーバーが手動でバインディングを処理する方がよいことを発見しました。
それで、最小限のバインディングを使用する方法はありますか？または、パフォーマンスをあまり落とさずにバインディングを作成する方法。たとえば...大量のデータにバインドを使用しませんか?
ページに追加できるEmber.Viewオブジェクトはいくつですか?
返信ありがとうございます
何百もの複雑なアイテムを 1 つのページに表示する ember アプリケーションがあります。各アイテムは、すぐに使用できるハンドルバー バインディングを使用して、約 12 個のプロパティを出力します。レンダリングは非常に高速 (100 ミリ秒未満) であり、バインディングに費やされる時間はほとんどありません。
ブラウザーが 6 列で 100 項目でハングしている場合は、他に何か問題があることがわかります。
それで、最小限のバインディングを使用する方法はありますか？または、パフォーマンスをあまり落とさずにバインディングを作成する方法。
何が起こっているかを確認するために設定Ember.LOG_BINDINGS = trueしてみてください。バインドしているプロパティが循環依存関係を持つか、解決にコストがかかる可能性があります。デバッグに関する優れたヒントについては、この投稿を参照してください。
http://www.akshay.cc/blog/2013-02-22-debugging-ember-js-and-ember-data.html
ページに追加できるEmber.Viewオブジェクトはいくつですか?
具体的な制限があるとは思いませんが、ブラウザに依存することは確かです。数千を超えない限り、最適化を検討しません。
次の例をチェックして、非常に大きなテーブルを処理するために ember を最適化する方法を確認してください。
Erik Bryn は最近、Ember.ListViewについて講演しました。これは、ビューポートの外に出たリスト セルを再利用することで、ページのビュー数を大幅に削減します。
複数のプロパティを同時にモデル化する場合は、この手法をgroup-helperと組み合わせて、metamorph スクリプト タグの数を減らします。さらに、{{unbound}}プロパティをライブ更新する必要がない場合は、使用を検討してください。