GWT: Das Füllen einer Seite aus dem Datenspeicher mithilfe von RPC ist zu langsam

Question

Gibt es eine Möglichkeit, die Auffüllung einer Seite mit GWT-UI-Elementen zu beschleunigen, die aus Daten generiert werden, die aus dem Datenspeicher geladen werden? Kann ich den unnötigen RPC-Aufruf vermeiden, wenn die Seite geladen wird?

Weitere Details zu dem Problem, das ich erhalte: Es gibt eine Seite, auf der ich eine Tabelle mit Namen und Schaltflächen für eine Liste von Entitäten erzeuge, die aus dem Datenspeicher geladen werden. Es gibt eine Entrypoint für die Seite und in seiner onModuleLoad() ich etwas wie folgt aus:

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++; 
     } 
    } 
    ... 
}); 

Dies funktioniert, aber mehr als 30 Sekunden dauert, um die Seite mit den Tasten für 300 Kandidaten zu laden. Das ist inakzeptabel.

Die App wird in Google App Engine ausgeführt und verwendet den Datenspeicher der App-Engine.

Answer 1

Sie könnten eine Menge Dinge tun, ich werde sie nur auflisten, damit Sie die beste Wirkung haben.

1. FlexTable ist nicht für 300 Zeilen gedacht. Da Ihre Tabelle so einfach ist, sollten Sie in Betracht ziehen, den HTML-Code manuell zu generieren und dann ein einfaches HTML-Widget zu verwenden. Auch 300 Zeilen ist viel von Informationen - in Betracht ziehen, Paginierung. Die DynaTable sample app zeigt Ihnen, wie Sie dies tun.
2. Es sieht so aus, als ob Sie ein GWT-Modul pro Seite verwenden. Das ist der falsche Ansatz für GWT. Das Laden eines GWT-Moduls hat einige nicht-triviale Kosten. Um zu verstehen, was ich meine, vergleichen Sie Browseraktualisierung auf gmail v/s den Aktualisierungslink, den gmail bietet. Das sind die gleichen Kosten, die Sie zahlen, wenn jede Seite Ihrer Website über ein eigenes GWT-Modul verfügt.
3. Wenn die Liste der Kandidaten in verschiedenen Ansichten benötigt wird, können Sie sie zusammen mit dem HTML als JSON-Objekt senden und dann mit dem Dictionary class in GWT lesen. Das spart Ihnen den RPC-Aufruf, den Sie vornehmen. Dieser Ansatz wird nur empfohlen, wenn die Daten für mehrere Ansichten/Bildschirme nützlich sein sollen (z. B. Informationen für angemeldete Benutzer).
4. Überprüfen Sie, wie lange der RPC-Methodenaufruf dauert. Sie können stats in GWT aktivieren, um herauszufinden, wo Ihre Anwendung Zeit braucht.
5. Sie können auch Speed Tracer ausführen, um festzustellen, wo der Engpass liegt. Dies liegt nur daran, dass es offensichtlich ist, dass FlexTable viele DOM-Manipulationen durchführt. Wenn Sie nicht wissen, wo Sie anfangen sollen, ist Speed ​​Tracer ein großartiges Werkzeug.

Answer 2

Das Wichtige hier ist, wie Sie die Liste der Kandidaten abrufen, die Sie nicht angezeigt haben. 30 Sekunden sind extrem hoch und es ist unwahrscheinlich, dass dies allein auf den Datenspeicher zurückzuführen ist.

Haben Sie versucht, appstats zu verwenden, um Ihre App zu profilieren?

Answer 3

Wie sri suggested - Paginierung ist am einfachsten und (glaube ich) beste Lösung (zusammen mit zu Grid Schalen oder <table>). Aber wenn Sie aus irgendeinem Grund viele Reihen auf einmal anzeigen möchten, hat die GWT Incubator projecta nice wiki page darüber - zusammen mit einigen Benchmarks, die zeigen, wie FlexTable bei großen Zeilenanzahl saugt. Schauen Sie sich ihre other tables zu;)

Answer 4

Ihr Problem ist, dass jedes Mal, wenn Sie etwas zu der FlexTable hinzufügen, es die gesamte Seite neu rendern und neu streichen muss. Versuchen Sie, eine neue FlexTable zu erstellen, füllen Sie sie, wenn sie voll ist, entfernen Sie die alte und legen Sie sie dort ab.