☰

巨大なデータセット（angular.js）でngRepeatのパフォーマンスを向上させるにはどうすればよいでしょうか？質問する

tag-icon • tag-icon javascript angularjs angularjs-ng-repeat
巨大なデータセット（angular.js）でngRepeatのパフォーマンスを向上させるにはどうすればよいでしょうか？質問する

数千行の巨大なデータセットがあり、各行には約 10 個のフィールドがあり、データ量は約 2 MB です。これをブラウザで表示する必要があります。最も単純なアプローチ (データを取得して に入れ、$scope処理ng-repeat=""を実行させる) は問題なく動作しますが、DOM にノードを挿入し始めると、ブラウザが約 30 秒ほどフリーズします。この問題にはどのように対処すればよいでしょうか。

1 つのオプションは、行を段階的に追加し$scope、1 つのチャンクを DOM に挿入し終えてから次のチャンクに移動するまで待つことですngRepeat。しかし、私の知る限り、ngRepeat は「繰り返し」を終了したときに報告を返さないので、見苦しいものになります。

他のオプションとしては、サーバー上のデータをページに分割し、複数のリクエストで取得する方法がありますが、これはさらに見苦しいです。

Angular のドキュメントを調べて、 のようなものを探しましたng-repeat="data in dataset" ng-repeat-steps="500"が、何も見つかりませんでした。私は Angular の使い方にかなり不慣れなので、要点を完全に見逃している可能性があります。これに関するベスト プラクティスは何ですか?

ベストアンサー1

@AndreM96 の意見に同意します。最適なアプローチは、限られた数の行のみを表示することです。これにより、より高速で優れた UX が実現します。これは、ページネーションまたは無限スクロールを使用して実行できます。

Angularの無限スクロールは本当に簡単です制限フィルター。初期制限を設定するだけで、ユーザーがさらにデータを要求したときに (わかりやすくするためにボタンを使用しています)、制限を増やすことができます。

<table>
    <tr ng-repeat="d in data | limitTo:totalDisplayed"><td>{{d}}</td></tr>
</table>
<button class="btn" ng-click="loadMore()">Load more</button>

//the controller
$scope.totalDisplayed = 20;

$scope.loadMore = function () {
  $scope.totalDisplayed += 20;  
};

$scope.data = data;

がここにありますジェイズビン。

このアプローチは、通常、大量のデータをスクロールするときに遅延が発生するため、携帯電話では問題になる可能性があります。そのため、この場合はページネーションの方が適していると思います。

これを実行するには、limitTo フィルターと、表示されるデータの開始点を定義するカスタム フィルターが必要になります。

がここにありますJSBinページ番号付き。

おすすめ記事