0

2000 行以上のテーブルがあり、各行に 1 つの div を定期的に更新する必要があります。10秒ごとに更新したかったのですが、ページがかなり遅くなります。

サーバーには 32 GB の RAM があり、私のラップトップには 8 GB の RAM があり、どちらにも少なくとも 2 つのクアッド コアがあります。

div & update 呼び出しは次のとおりです。

<div id='div_$id' name='div_$id'></div>

<script language='javascript'>
    new Ajax.PeriodicalUpdater('div_$id', 'upd.php',{ 
       method: 'post', 
       frequency: 10, 
       decay: 1, 
       parameters: {id:'$id'}}
    );
</script>

Prototype の最新バージョン (1.7.0.0) を使用しています。これを行うためのより高速でより良い方法はありますか? それとも、頻度を 1 分以上にロールバックする必要がありますか?

4

1 に答える 1

1

考えられる解決策は 2 つあります。

  1. 一括更新は使用しないでください。更新された HTML コンテンツを取得し、現在と更新された 2 つの DOM サブツリーを比較します。可能な限り小さな変更を行い、違いが見つかった場合にのみ行います - テキストノードが変更され、要素が挿入/削除されました。コードhttp://javascripts.svn.sourceforge.net/viewvc/javascripts/javascripts/js.prototype-extensions/js/extensions/element.js?view=markup - function updateSmoothly をファイルの最後で見てください。各要素には新しいメソッドがあり、アップデーターにElement#updateSmoothly(content)追加のオプションを渡すことができます:insertion

    new Ajax.PeriodicalUpdater('div_$id', 'upd.php', { 
  method: 'post', 
  frequency: 10, 
  decay: 1, 
  parameters: {id:'$id'},
  insertion: function(receiver, responseText) {
    receiver.updateSmoothly(responseText);
  }
});

    このコードは 1300 行以下の IE8 更新テーブルで機能し、UI は多かれ少なかれ反応しました (CPU Core 2 Duo、RAM 3Gb、OS Vista Home)。

  2. 無限スクロール技術に似たものを使用すると、大幅な最適化が可能です。いずれにせよ、UI ユーザーは画面上で2000 行以上を同時に見ることはできません。テーブルの大部分は画面外にあります。目に見えないものをダウンロードして更新する必要があるのはなぜですか? 目に見えないものを DOM に含める必要があるのはなぜですか? テーブルのどの部分が現在表示されているかを追跡し、この部分のみの更新をサーバーに要求します。行が画面から消えたら削除し、表示されるようになったら新しい行をロードします。

于 2012-11-06T09:47:23.787 に答える