GWT FlexTableのパフォーマンスと最適化

Question

私はFlexTableを使ってGWTプロジェクトに取り組んでいます。私はおそらくCellTableを使用するべきであることを知っていますが、より良いパフォーマンスが得られるはずですが、FlexTableはスタイルが簡単で（特定のスタイルのセル）、特定のセルを簡単に更新できます。

WebSocketを使用しているテーブルの更新を受信する。私たちが今直面している問題は、毎秒100を超えるアップデートがWebSocketを経由している場合にCPU負荷が高くなることです。 WebSocket接続の各メッセージには、テーブル内の複数のセルの更新が含まれています。したがって、実際にはFlexTableでレンダリングされるべき毎秒100以上の更新があります。 4GBのRAMを搭載した3GHz i5のCPU負荷は約50％です。データの実際のレンダリングを無効にすると（setText（）メソッド呼び出しをコメントアウトすると）、CPU負荷は5〜10％に低下します。だから私は、DOMの更新がボトルネックであり、コードの他の部分ではないことを知っています。

は、それが代わりに

CellTableにスイッチ（しかし、どのようにして焦がす細胞の更新を行うために）

1. 使用グリッド方が良いでしょうか？
2. DOMの代わりに、FlexTableのsetText（で動作するように使用JS/JSNI）

は、テーブルを実装し、パフォーマンスを向上させるためにそこより良い方法はありますか？

誰かがFlexTableで同様の問題を抱えていたとしても、私はそれを試してみましたが、それは単に遅いだけで一般的な意見ではありません。私たちは、JavaScriptで第二のCPU負荷ごとに同じ100のアップデートで純粋に行われたアプリケーションのプロトタイプは15％程度

更新
たちは〜10でセルの値に減少CPU負荷の変化を示すために使用されるCSSのフェード効果を削除されてい％。したがって、DOMだけが問題ではないようです。

Answer 1

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

個々のセルを更新することができないため、CellTableはここであなたを手伝ってくれません。代替として、グリッドだけを残し、TableElementを手動で管理します。

Answer 2

CellTableを使用すると、単一のセルを更新するためにテーブル全体を再描画する必要があります。しかし、そのような更新は、DOMへの単一の更新である。 FlexTableを使用すると、すべての更新をまとめてバッチ処理しても、一連のDOM操作を個別に行うことになります。したがって、一部のセルを重複して更新するためにCellTableを使用することは効率的ではないように見えるかもしれませんが、スイッチする価値はまだあります。 特に、合計セル数に近いセル数を更新する場合は、バッチ100の更新をまとめて1回のDOM書き込みですべて実行します。

私は30x100の大きさにすることができるCellTableを持つアプリを持っています。任意のセルには任意のスタイルがあり、各セルには複雑な内容（<img>、一部は<div>、一部のテキスト）があり、時には1つのセルを更新する必要があります。開発モードで私のMacBook Pro上で全体の再描画は気づかれません（私の人間の認識に）。

ライブアップデート（毎秒100回のアップデートなど）が必要な場合は、別のプラットフォームが必要な場合があります。あなたのモニターは毎秒100回もリフレッシュされません。