7

200 ～ 300 行のテーブルをレンダリングする Ember アプリケーションがあります。Tablesorter のような機能を実装しようとしましたが、パフォーマンスが非常に低下しました。

アプリケーションの関連部分の概要は次のとおりです。オブジェクトのコレクション、ArrayControllerおよびがありCollectionViewます。CollectionView#contentにバインドされ、プロパティArrayController#arrangedContentを設定することでソートが行われArrayController#sortPropertiesます。

便宜上、JS フィドルをセットアップしました: http://jsfiddle.net/496tT/1/。JS コンソールの Chrome では、生の並べ替えに約 5 ミリ秒、テーブルの並べ替えに約 1000 ミリ秒かかることがわかります。

私の現在の実装では、EmberarrangedContentは更新時にすべてのビューを再レンダリングします。アイテムビューをソートすることでソートが高速化される可能性があるCollectionViewため、ビューを適切な順序でDOMに効果的に再接続できると思います。しかし、Ember.js でこれを適切に行う方法がわかりません。

何かご意見は？

PS — SO には重複があります — https://stackoverflow.com/questions/12915647/table-sort-with-emberjs-clear-and-rebuild-the-table — しかし、答えはありません。この質問では、便宜上フィドルを設定しました。

4

1 に答える 1

1

これであなたがやっていることに対して十分な速度向上が得られるかどうかはわかりませんが、できることの 1 つは、ビューのバインド先を変更することです。コントローラーだけでなく、controller.arrangedContent にバインドしています。私が変更した場合のフィドルで：

App.MyView = Ember.CollectionView.extend({
    tagName: 'ul',
    contentBinding: 'controller.arrangedContent',
    itemViewClass: Ember.View.extend({
        tagName: 'li',
        templateName: 'element'
    })
});

に：

App.MyView = Ember.CollectionView.extend({
    tagName: 'ul',
    contentBinding: 'controller',
    itemViewClass: Ember.View.extend({
        tagName: 'li',
        templateName: 'element'
    })
});

私にとっては、約9秒の「rawsort」から6秒になります。s1 と s2 の平均も 1400 程度ではなく、約 900 です。

于 2012-12-06T05:43:49.413 に答える