web-dev-qa-db-ja.com

Webサイトに無限スクロールを実装する場合、どのテクニックを使用すればよいですか?

私は現在、その検索ページ(Elastic searchからの結果自体)に無限スクロールを実装するWebサイトに取り組んでおり、当然のことながら、スクロールが多くなるほど、スクロールが遅くなります。

これは、モバイルデバイス、特に低コストのデバイス(ほとんどの人が使用する)で特に顕著です。

HTML/CSSの観点から、モバイルデバイスでサイトをレスポンシブにすることに多くの労力を費やしましたが、必然的にDOMにアイテムを追加すると、速度が低下します。

TwitterやFacebookのようなサイトは、この問題を回避するのに良い仕事をしているようですが、どうすればよいでしょうか。これは何らかの形のDOMガベージコレクションであり、アイテムは下にスクロールするだけでなく上にもロードされ、表示されていないアイテムはGCされますか?

複雑さを増すために、headroom.jsライブラリを使用して、検索オプションを変更するために必要なメニューを少し上にスクロールするだけで常に利用できるようにしています。下にスクロールして検索を増やすと、このアクションが遅くなり、不快感が増します。結果をスクロールします。

各検索結果は、テキストだけでなく画像も含みます。

また、検索結果はページをリロードせずに更新されます。この目的のためにAngularJSが提供する双方向バインディングを使用します(検索結果を押し込み、ng-repeatがビューに入力するために使用する配列からポップします)が、他のライブラリ(Ember.jsなど)のユーザーも同じ問題に直面していると思います。

誰かが私たちがこれにどのように取り組むべきかについて詳しく説明できますか?私たちは無限のスクロールの側面(スクロールするにつれてDOMに項目をロードする)に釘付けになっていますが、ローエンドのスマートフォンでは状況がすぐに遅くなるため、この問題には見逃していた別の側面があると思います。

トリックは、スクロールバーをそのままにしてユーザーが見ることができるDOMにのみアイテムをロードし、スクロールイベントに応答してユーザーが表示することを期待していたアイテムをロードすることだと思いますが、どうすればよいでしょうか?この目的で利用できるライブラリはありますか?

ありがとう

4
JMK

これを参照してください: ClusterizeJS

このプラグインを使用すると、DOMをスリムで小さく保ちながら、膨大な数のアイテムをスクロールできます。ビューアイテムから削除し、動的にサイズ変更されるダミー要素に置き換えて、スクロールの位置が期待どおりに保持されるようにします。

Facebookはこのようにはしていませんが、遅いデバイスで優れたパフォーマンスを発揮するには、これが最善の方法だと思います。

Angularに関する追加の注記

また、純粋なHTML + CSSページは、追加のjavascriptを実行するDHTMLよりもはるかに簡単に処理できることにも注意してください。 Angularは特にhungryです。これは、モデルとビューをダーティチェックして同期と実行を維持する必要があるためです。変更に関連するコード。DOMに多数のバインディングが含まれている場合(数は約2000と言われます)、ページが影響を受けます。Angularに実装されている1回限りのバインディングを使用して、特に速度を上げてみてくださいユーザーがモデルを変更せずにビューにデータのみが表示される場合。

3
Robert Koritnik