5

データストアからロードされたデータから生成されたGWTのUI要素を使用してページの作成を高速化する方法はありますか？ページの読み込み時に不要なRPC呼び出しを行わないようにすることはできますか？

私が経験している問題の詳細：データストアからロードされたエンティティのリストの名前とボタンを含むテーブルを生成するページがあります。ページのエントリポイントがあり、そのonModuleLoad（）で次のようにします。

final FlexTable table = new FlexTable();

rpcAsyncService.getAllCandidates(new AsyncCallback<List<Candidate>>() {
    public void onSuccess(List<Candidate> candidates) {
       int row = 0;
       for (Candidate person : candidates) {
          table.setText(row, 0, person.getName());
          table.setWidget(row, 1, new ToggleButton("Yes"));
          table.setWidget(row, 2, new ToggleButton("No"));
          row++;
       }
    }
    ...
});

これは機能しますが、300人の候補者のボタンを含むページをロードするのに30秒以上かかります。これは受け入れがたい。

アプリはGoogleAppEngineで実行されており、アプリエンジンのデータストアを使用しています。

4

4 に答える 4

8

あなたはたくさんのことをすることができます、私はあなたに最高の影響を与えるためにそれらをリストするだけです。

  1. FlexTable300行を対象としていません。テーブルは非常に単純なので、HTMLを手動で生成してから、単純なHTMLウィジェットを使用することを検討する必要があります。また、300行は多くの情報です-ページネーションの使用を検討してください。DynaTableサンプルアプリは、これを行う方法を示しています。
  2. ページごとに1つのGWTモジュールを使用しているようです。それはGWTへの間違ったアプローチです。GWTモジュールのロードには、重要なコストがかかります。私が何を意味するかを理解するために、Gmailでのブラウザの更新とGmailが提供する更新リンクを比較してください。これは、Webサイトのすべてのページに個別のGWTモジュールがある場合に支払う費用と同じです。
  3. ビュー全体で候補のリストが必要な場合は、HTMLと一緒にJSONオブジェクトとして送信し、GWTのDictionaryクラスを使用して読み取ることができます。これにより、作成しているRPC呼び出しが節約されます。このアプローチは、データが複数のビュー/画面（ログインしたユーザー情報など）で役立つ場合にのみ推奨されます。
  4. RPCメソッド呼び出しにかかる時間を確認してください。GWTで統計を有効にして、アプリケーションに時間がかかっている場所を把握できます。
  5. Speed Tracerを実行して、ボトルネックがどこにあるかを特定することもできます。これが最後になるのは、FlexTableが多くのDOM操作を実行していることが明らかだからです。一般に、どこから始めればよいかわからない場合は、SpeedTracerが優れたツールです。
于 2010-05-02T17:23:02.860 に答える
1

ここで重要なのは、表示していない候補のリストをどのように取得するかです。30秒は非常に長く、データストアだけが原因である可能性は低いです。

appstatsを使用してアプリのプロファイルを作成してみましたか？

于 2010-05-02T16:30:14.567 に答える
1

sriが提案したように、ページ付けは最も簡単で（私は思う）最良の解決策です（に切り替えるか、Gridまたは単に<table>）。しかし、何らかの理由で一度に多くの行を表示/レンダリングしたい場合は、GWTIncubatorプロジェクトにそれに関する素晴らしいwikiページFlexTableがあります-大きな行数でどのように吸うかを示すいくつかのベンチマークがあります。他のテーブルもチェックしてください;）

于 2010-05-02T20:46:38.560 に答える
1

問題は、FlexTableに何かを追加するたびに、ページ全体を再レンダリングして再描画する必要があることです。新しいFlexTableを作成してデータを入力し、完全にデータが入力されたら、古いFlexTableを削除して、新しいFlexTableをそこに配置してみてください。

于 2010-05-02T21:00:11.573 に答える