[解決済み] 巨大なデータセットに対するngRepeatのパフォーマンスを向上させる方法（angular.js）？

質問

数千行、各フィールド10個程度、2MB程度の巨大なデータセットがあります。これをブラウザで表示したいのですが、どうすればよいでしょうか？最も簡単な方法（データを取得し、それを $scope を使用します。 ng-repeat="" は正常に動作しますが、DOMにノードを挿入し始めると、約半分の時間、ブラウザがフリーズします。この問題にどのようにアプローチすればよいのでしょうか？

1つの方法として、行を $scope を待ちます。 ngRepeat を使用して、1 つのチャンクを DOM に挿入し終えてから次のチャンクに移動します。しかし、AFAIKでは、ngRepeatは"repeating"を終了したときに報告しないので、醜いことになります。

他の方法としては、サーバー上のデータをページに分割し、複数のリクエストでそれらを取得することもできますが、これはさらに醜いことです。

Angularのドキュメントに目を通し、以下のようなものを探しました。 ng-repeat="data in dataset" ng-repeat-steps="500" しかし、何も見つかりませんでした。私はAngularの方法についてかなり新しいので、私が完全にポイントを逃している可能性があります。この場合のベストプラクティスは何ですか？

どのように解決するのですか？

私は @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;

以下は JsBin .

この方法は、携帯電話の場合、多くのデータをスクロールするときにラグが発生することが多いので、この場合はページ分割の方が適していると思います。

そのためには、limitToフィルターと、表示されるデータの開始点を定義するためのカスタムフィルターが必要です。

以下は JSBin をページネーションで表示します。