10

次のように無限スクロールを実装しました。

new_page_value = 1;

$(window).scroll(function() {
    if($(window).scrollTop() >= $(document).height() - $(window).height() - 200) {

        new_page_value = parseInt(new_page_value) + 1;

        get_page(new_page_value);

    }
});

ユーザーがページの一番下 (残り 200px) に到達すると、関数get_page()が呼び出されます。これには、新しいページのすべてのコンテンツを取得してドキュメントの に追加するajax 呼び出しが含まれて<body>います。

サイトが大きくなり、10 個の小さなページの代わりに無数の巨大なページがある場合、無限スクロールを長時間維持するのに十分な永続性がある場合、ユーザーのブラウザーがクラッシュする可能性があることに気付きました。

これはこの問題の可能な解決策でしょうか:

<body>10 ページ目まで新しいページをドキュメントに追加し続けます。その後<body>は、追加する代わりにコンテンツを完全に置き換えます。html()ではなく使用しappend()ます。

これが実際にクラッシュを防ぐために機能するかどうかはわかりません。.html()ajax経由で持ち込まれた以前のhtmlの「メモリ」をクリアしますか?

4

3 に答える 3

6

これは、AJAXリストコンテンツを使用する多くのサイトに共通の問題だと思います。それでは、最も人気のある（規模=経験を考えてください）Webサイトとそのソリューションの例を見てみましょう：

Google画像検索

images.google.comをチェックアウトして、たとえば「guiness」などを検索すると、結果でいっぱいのページが表示されます（実際には、画像はhtmlコードではなくajaxで読み込まれるため、ページの高さは固定されています）そして下部をスクロールするとボタンがあります"Show more results"。これはあなたの問題の解決策の1つかもしれませんが、たとえば10ページ目以降の下部にボタンを配置する必要が本当にありますか？これは一般的にページの使いやすさとメモリリークの良い解決策だと思いますが、次のように実際には必要なオプションではありません。

フェイスブック

Facebookニュースフィードは別の話です。ボタンはありますが"Show more posts"、投稿の次のページを読み込むのではなく、いつ正確に表示されるのかわかりません。スクロールするだけで、10〜15ページの投稿をロードすることが一度ありました。また、Facebookの投稿には、ビデオ、写真、AJAXコメント、および多くのメモリを必要とする多くのJavascriptファンシーなものが含まれています。多くの調査の結果、ユーザーのどれだけが一番下までスクロールしたかによって、彼らはこれをなんとか達成できたと思います。

Youtube

Youtubeは"Load more videos"すべてのページにあるので、ソリューションは基本的にGoogleに似ていますが、Googleがページのhtml全体をレンダリングし、スクロールすると画像が読み込まれる点が異なります。

ツイッター

Twitterは無限スクロールをサポートしています。そうです、ツイートが140文字で、メモリについてそれほど心配する必要がないためかもしれません。結局のところ、1ページの読み込みで1000ページを超えるツイートを喜んで読む人。したがって、ボタンはありませんし、ボタン"load more"も必要ありません。

したがって、2つの解決策があります。

  1. 無限スクロールを使用します（ロードするコンテンツの量とコンテンツの豊富さを考慮する必要があります）
  2. 使用ボタン："Load More"

何よりも、すでにロードされているリストのコンテンツを削除しないでください。

現在、すべてがJavascriptであり、Javascriptにはガベージコレクションがあるため、DOMをアンロードして（プレーンテキストではなくJavascriptがある場合）、Javascriptからガベージを削除することは非常に困難です。これは、アンロードされたコンテンツの割り当てられたメモリ全体をブラウザから解放しないことを意味します。

また、最初にロードしたものを再度ロードする必要があるのはなぜですか。別のサーバー要求、つまり別のデータベース要求などのコストがかかります。

于 2012-04-29T19:06:13.313 に答える
1

私は以前にこれを扱ったことがあり、ここに私の考えのいくつかがあります：

a) 一度にメモリ ページにデータを追加する場合は問題ありません。一部のブラウザは適切に応答しない場合がありますが、最新のブラウザのほとんどは、ページに十分なメモリがある限り問題なくレンダリングされます。ページを追加すると、RAM の使用量がどのように増加するかがわかります。各ページは個別のプロセスであり、タスクマネージャーが組み込まれているため、これにはクロムを使用してください

b) の使用に関してはhtml()、実際にマークアップを削除しますが、特別な条件を処理しようとし、オーバーヘッドがあり、置き換えるコンテナー内にネストされたすべてのコントロールにアクセスするため、多大なコストがかかります (最後のパット）が、コストがかかります。DOM をクリアするより簡単な方法は、innerHTMLプロパティを使用して空に設定することです。jquery はこれを行いますが、それはhtml()API の後半にあります。APIを開いてメソッドを見てください。使用してinnerHTML

$("<selector>")[0].innerHTML=""

また、ページの削除はユーザーとして私には奇妙に思えます。最初のコメントに戻りたい場合はどうすればよいでしょうか。また、それを無限スクローラーにすることも考えないでください。本物の使用例があり、そこにボタンを貼り付ける必要がありましたが、これはユーザーが最初のページから離れてスクロールしたときではなく、ユーザーが 3 番目のページに到達したときであり、その上の結果を表示する必要があります。

それがあなたの質問に答えてくれることを願っています.ところで、あなたの友人が無限スクロールを使用していることを願っています.QAチームによってのみテストされる可能性のあるケースを設計しすぎないでください. その労力を別の場所に費やすほうがよいでしょう。

于 2012-04-29T18:35:56.040 に答える
-1

はい、5 ページの後にアイデアを提案できれば、前のページをすべて削除するのではなく、最初のページを削除して新しいページを追加するだけです。幸運を ：）

于 2012-04-29T18:20:18.680 に答える