javascript - DOM要素を使用したGWT操作のパフォーマンス価格は本当に高いですか？

Question

私が望んでいるのは、GWTによって行われたDOM操作に支払うパフォーマンスの価格をある程度理解することです。どの操作が「高価」でどれがそうでないか、そしてそれをどのように測定できるかを知りたいです。これらの操作をどのようにプロファイリングできるか知りたいのですが、この問題にまったく注意を払う価値がないかもしれません。

より正確には、これが私が遭遇したユースケースのリストです。

1）ユースケース＃1：何らかのイベントが発生した場合に外観を変更するウィジェットがあります。古いウィジェットを削除して新しいウィジェットを作成する場合、または既存のウィジェットのスタイルを変更する方がよい場合、違いはありますか？言い換えれば、GWTアプリで新しいウィジェットを作成して挿入するコストはどれくらいですか？削除されたDOM要素用のガベージコレクターはありますか？

2）ユースケース＃2：サーバー側から/サーバー側でデータを取得または保存する必要があります。データは非常に大きくなる可能性があります。非常に単純化された方法でこの操作を行う特別なサーブレットを作成する意味はありますか？標準のGWTサーブレットへのRPC呼び出しを行う代わりに、文字列を受け入れるか出力するだけですか？これはパフォーマンスを上げるための良い方法ですか？自作サーブレットは非常に単純なものにすることができます。

3）ユースケース＃3：他のウィジェットの長いリストであるウィジェットがあります。クライアント側のパフォーマンスのために表示するのに安全なウィジェットの数をどのように見積もることができますか？つまり、過去5年間に500万件のチャットメッセージを表示すると、アイテムを部分的にロードしたとしても、クライアント側の速度が低下し、サーバー側のストレスが制限される可能性があります。

4）ユースケース＃4：コンテナ内の要素の数を調べたり、要素のスタイルを調べたりするなど、dom操作のパフォーマンス価格はどうですか？たとえば、チャット内のメッセージの数を数える必要があります。チャットコンテナのDOMの子をカウントするこの操作は非常にコストがかかるため、（Javaコレクションと同様に）個別のカウンタを実装し、新しいメッセージが到着したときにそれを増やす方がよいでしょうか。

Answer 1

Use case #1: Updating style is always recommended rather than remove/add widget。スタイルの更新とは、CSSの解析/再計算/ペイントを意味します。ウィジェットの削除/追加は、DOMとCSSの解析/再計算/ペイントにつながります。

Use Case #2:それは本当にあなたの操作に依存します。GWTには、3種類のサーバー側通信が付属しています。それぞれがさまざまなユースケースに適しています-こちらをお読みください。

a) RPC - Remote Procedure calls
b) RF - Request Factory & Entities
c) Request Builder with self-written Servlet serving up Strings,JSON or Autobean.

Use Case #3:最小限のDOM操作で大きなデータを表示するGWTセルウィジェットがあります。チャットメッセージを表示することが要件である場合は、CellListにAutoPagerをスクロールして試してみてください。これは、非同期データプロバイダーでスローされる可能性があります。

Use case #4:JavaPojoでサポートされているセルウィジェットを使用することになっています。各チャットメッセージはJavaPojo"ChatMessage"のインスタンスであり、RPC呼び出しに基づいて、リストをフェッチしてCellList/CellTableにフィードします。Listの操作のsizeOfだけで「データ」を数えることができるのに、なぜdomを数えるのでしょうか。

あなたはプロジェクトの前に間違った方向に考えています。プログラミングアプローチが間違っている場合、DOM操作が問題になります。GWTファイルをダウンロードしてGWTサンプルを調べ、Eclipseにインポートして実行します。

パフォーマンスチューニングはGWTの最も強力な機能です。十分な経験があれば、GWTのパフォーマンスの問題を次のように調整できます。SpeedTracer, Logging, Chrome Dev tools Profiling, GWT Light Weight Metrics, Code Splitting, GWT Compiler Metrics, GWT Closure Compiler, Resource Bundling and the list goes on....