52

だから私はAngularJSを使って無限のスクロールテーブルを作成しようとしています：http：//jsfiddle.net/vojtajina/U7Bz9/

私が抱えている問題は、jsfiddleの例で、100万件の結果が得られるまでスクロールを続けると、ブラウザーのクロールが遅くなるということです。1,000,000$scope.itemsに結果が表示されるためです。たとえば、1000一度に$ scope.items内に結果があり、表示していた結果がたまたまそれらの中にあるとしたら、もっと良いでしょう1000。

ユースケースの例：ページが読み込まれ、最初の10結果が表示されます（から1,000,000）。表示されているだけですが10、最初の1000結果が実際に読み込まれます。次に、リストの一番下までスクロールして、最後の10アイテムを表示します。もう一度一番上までスクロールすると、一番上の10結果をサーバーから再度ロードする必要があると思います。

私はExtJSで行ったプロジェクトで、同様の状況があります。数千の結果が含まれる無限のスクロールリストです。これを処理するExtJSの方法は、結果の現在のページをロードしてから、結果の2、3ページをプリロードすることでした。ただし、いつでも、10ローカルに保存された結果のページしかありませんでした。

だから私の質問は、AngularJSにこれを実装するにはどうすればよいかということだと思います。私は多くのコードを提供していないことを知っているので、人々がコード化された答えを与えるだけではなく、少なくともどの方向に進むべきかについてのアドバイスを期待しています。

4

6 に答える 6

47

いくつかのこと：

  1. 「無限スクロール」から「1,000,000」行までは、フレームワークに関係なく問題が発生する可能性があります。これは、数百万のDOMノードを作成したからです（各レコードに複数の要素があると想定）。

  2. あなたが見ている実装やそのようなものは、1つの大きな理由で非常に<li ng-repeat="item in items">{{item.foo}}</li>迅速に問題が発生します：またはそのようなngBindはそのフィールドに設定され、関数参照などの形で多くのオーバーヘッドを作成します。したがって、「配列」内の10,000個の小さなオブジェクトはそれほど悪くはありませんが、これらの10,000個のアイテムごとに10,000〜20,000個の追加の関数参照があります。{{item.foo}}}$watch

この場合に実行したいのは、データを最新の状態に保つだけでなく、「遠すぎる」DOM要素の追加と削除を処理するディレクティブを作成することです。これにより、パフォーマンスの問題のほとんどが軽減されます。

...良い無限スクロールは簡単ではありません、申し訳ありません。

于 2013-01-11T18:54:07.823 に答える
26

私はangular-uiの実装ui-scrollが好きです...

https://github.com/angular-ui/ui-scroll

...ngInfiniteScrollを介して。標準の無限スクロールとのui-scrollの主な違いは、ビューポートを離れるときに前の要素が削除されることです。

彼らのreadmeから...

未定義の長さのデータ要素のリストをユーザーに提示する一般的な方法は、リストの上部の小さな部分から開始することです。これは、ページのスペースを埋めるのに十分な量です。ユーザーがリストを下にスクロールすると、リストの下部に追加の行が追加されます。

このアプローチの問題は、リストの上部にある行がビューからスクロールアウトすると非表示になりますが、それらはページの一部であり、リソースを消費することです。ユーザーが下にスクロールすると、リストが大きくなり、Webアプリの速度が低下します。

行を表すhtmlにイベントハンドラーやアンギュラーウォッチャーがアタッチされている場合、これは実際の問題になります。平均的な複雑さのWebアプリは、1行あたり20人のウォッチャーを簡単に紹介できます。100行のリストの場合、合計2000人のウォッチャーと遅いアプリが得られます。

さらに、ui-scrollは積極的に維持されています。

于 2015-10-08T18:19:26.523 に答える
17

http://kamilkp.github.io/angular-vs-repeatがあなたが探しているものになるようです。これは仮想スクロールディレクティブです。

于 2014-09-26T06:18:27.707 に答える
8

したがって、AngularJSのng-gridモジュールには、私が必要としていたものがほぼ正確に含まれていることがわかります。例のページを見ると、サーバー側の処理の例は、必要なデータのみをロードする無限スクロールリストでもあります。

とにかくコメントして答えてくれた人たちに感謝します。

最新のURL：ng-grid

于 2013-01-14T15:15:35.183 に答える
6

ng-infinite-scrollを使用してみてください：

http://binarymuse.github.io/ngInfiniteScroll/

于 2013-12-16T05:45:20.517 に答える
2

AngularMaterialからvirtualRepeatをチェックしてください

ui-scrollと同じように、ビューポート領域に表示される行の動的な再利用を実装します

于 2016-12-16T17:46:26.837 に答える