GWT: Das Auffüllen einer Seite aus dem Datenspeicher mittels RPC ist zu langsam

Question

Gibt es eine Möglichkeit zur Beschleunigung der Bevölkerung einer Seite mit GWT's UI-Elemente, die aus Daten aus dem Datenspeicher geladen generiert werden? Kann ich den unnötigen RPC-Aufruf vermeiden, wenn die Seite geladen wird?

Mehr Details über das Problem, das ich habe: Es gibt eine Seite, auf der ich eine Tabelle mit Namen und Schaltflächen für eine Liste von Entitäten generiere, die aus dem Datenspeicher geladen wurden. Es gibt einen EntryPoint für die Seite und in dessen onModuleLoad() mache ich so etwas wie dies:

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

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

Die App läuft auf Google App Engine und nutzt den Datenspeicher der App Engine.

Answer 1

Es gibt viele Möglichkeiten, ich werde sie nur in der Reihenfolge auflisten, in der sie die beste Wirkung erzielen.

1. FlexTable ist nicht für 300 Zeilen gedacht. Da Ihre Tabelle so einfach ist, sollten Sie in Erwägung ziehen, das HTML von Hand zu erstellen und dann ein einfaches HTML-Widget zu verwenden. Außerdem sind 300 Zeilen eine Menge von Informationen - erwägen Sie die Verwendung einer Paginierung. Die DynaTable Beispielanwendung zeigt Ihnen, wie Sie dies tun können.
2. Es sieht so aus, als würden 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 die Browseraktualisierung bei Google Mail mit dem Aktualisierungslink, den Google Mail anbietet. Das sind die gleichen Kosten, die Sie zahlen, wenn jede Seite Ihrer Website ein eigenes GWT-Modul hat.
3. Wenn die Liste der Kandidaten in verschiedenen Ansichten benötigt wird, können Sie sie zusammen mit dem HTML-Code als JSON-Objekt senden und dann die Wörterbuch-Klasse in GWT, um sie zu lesen. Dies erspart Ihnen den RPC-Aufruf, den Sie tätigen. Dieser Ansatz wird nur empfohlen, wenn die Daten über mehrere Ansichten/Bildschirme hinweg nützlich sein werden (z. B. Informationen über eingeloggte Benutzer).
4. Prüfen Sie, wie lange der Aufruf Ihrer RPC-Methode dauert. Sie können aktivieren Statistiken in GWT um herauszufinden, wo Ihre Anwendung Zeit verbraucht.
5. Sie können auch Folgendes ausführen Speed Tracer um zu ermitteln, wo der Engpass liegt. Dies ist nur der letzte Punkt, denn es ist offensichtlich, dass FlexTable eine Menge DOM-Manipulationen durchführt. Wenn Sie nicht wissen, wo Sie anfangen sollen, ist Speed Tracer ein großartiges Werkzeug.

Answer 2

Entscheidend ist hier, wie Sie die Liste der Kandidaten abrufen, was Sie nicht gezeigt haben. 30 Sekunden sind extrem viel, und es ist unwahrscheinlich, dass dies allein auf den Datenspeicher zurückzuführen ist.

Haben Sie versucht, mit Appstats ein Profil Ihrer App zu erstellen?

Answer 3

Wie sri vorgeschlagen - Paginierung ist die einfachste und (meiner Meinung nach) beste Lösung (zusammen mit dem Wechsel zu Grid oder einfach <table> ). Aber falls Sie aus irgendeinem Grund viele Zeilen auf einmal anzeigen/rendern wollen, kann die GWT-Inkubator-Projekt hat eine schöne Wikiseite darüber - zusammen mit einigen Benchmarks, die zeigen, wie FlexTable ist bei großer Zeilenzahl ätzend. Überprüfen Sie ihre andere Tabellen auch ;)

Answer 4

Ihr Problem ist, dass jedes Mal, wenn Sie etwas zur FlexTable hinzufügen, die gesamte Seite neu gerendert und neu gezeichnet werden muss. Versuchen Sie, eine neue FlexTable zu erstellen, sie zu füllen und, wenn sie vollständig gefüllt ist, die alte Tabelle zu löschen und die neue dort einzufügen.