5

FlexTableを使用してデータを表示する GWT プロジェクトに取り組んでいます。パフォーマンスが優れているため、おそらくCellTableを使用する必要があることはわかっていますが、FlexTable はスタイル設定 (特定のセルのスタイル設定) が容易で、特定のセルの更新が容易になります。

テーブルの更新を受け取るために、WebSocket を使用しています。私たちが現在直面している問題は、WebSocket を介して 1 秒あたり 100 件を超える更新が行われる場合に CPU 負荷が高くなることです。WebSocket 接続からの各メッセージには、テーブル内のいくつかのセルの更新が含まれています。したがって、実際には、FlexTable でレンダリングする必要がある 1 秒あたり 100 を超える更新があります。4GB RAM を搭載した 3GHz i5 の CPU 負荷は約 50% です。データの実際のレンダリングを無効にすると (setText() メソッド呼び出しをコメントアウト)、CPU 負荷は 5 ～ 10% に下がります。したがって、コードの他の部分ではなく、DOM の更新がボトルネックであることはわかっています。

したほうがいいでしょうか

  1. 代わりにグリッドを使用
  2. CellTable に切り替えますか (ただし、単一のセルを更新するにはどうすればよいですか)?
  3. FlexTable setText() の代わりに JS/JSNI を使用して DOM を操作する

テーブルを実装してパフォーマンスを向上させるより良い方法はありますか?

誰かがFlexTableで同様の問題を抱えているかどうかをグーグルで検索しようとしましたが、単に遅いという一般的な意見しか見つかりませんでした。具体的なことは何もありません. アプリケーションのプロトタイプは純粋に JavaScript で作成されており、同じ 1 秒あたり 100 回の更新で、CPU 負荷は約 15% です。

更新
セル値の変化を示すために使用した css フェード効果の削除により、CPU 負荷が最大 10% 減少しました。したがって、問題は DOM だけではないようです。

4

3 に答える 3

2

CellTable を使用すると、単一のセルを更新するためにテーブル全体を再レンダリングする必要があります。ただし、そのような更新は DOM に対する単一の更新になります。FlexTable を使用すると、すべての更新をまとめてバッチ処理したとしても、多数の個別の DOM 操作を行うことになります。そのため、一部のセルを重複して更新するため、CellTable を使用するのは効率が悪いと思われるかもしれませんが、それでも切り替える価値があるかもしれません。 特に、セルの総数に近い数のセルを更新する場合: 100 個の更新をまとめてバッチ処理し、単一の DOM 書き込みに対して一度にすべてを実行します。

30x100 まで大きくなる CellTable を持つアプリがあります。任意のセルに任意のスタイルがあり、各セルには複雑なコンテンツ ( <img>、いくつか<div>の 、およびいくつかのテキスト) があり、単一のセルを更新する必要がある場合があります。開発モードの macbook pro では、全体を再描画しても (人間の認識では) 目立ちません。

ライブ更新 (たとえば、1 秒あたり 100 回の更新) が必要な場合は、別のプラットフォームが必要になると思います。モニターでさえ、1 秒間に 100 回更新しているわけではありません。

于 2011-11-09T15:34:43.833 に答える
0

上記のすべての代わりに (または、得られる結果に応じて)、Scheduler メソッドのいくつかを使用することを検討します。特に Scheduler.get().scheduleIncremental() は、一度に 10 個のバッチで更新を行います。これにより、ブラウザーは更新の間に他のイベントを処理できるようになり、CPU 使用率にプラスの影響を与えるはずです。

個々のセルを更新できないため、CellTable はここではまったく役に立ちません。そのため、代わりにグリッドのみを残し、手動で TableElement を管理します。

于 2011-11-09T14:29:45.043 に答える
0

cellTable.redrawRow(index);大きなテーブルではどちらが速いかを使用できます。
良いことは、行インデックスがFieldUpdater.

于 2012-10-30T14:49:12.223 に答える