Hochleistungs-GWT. Teil 1

    image
    Dieser Beitrag ist der Beginn einer Reihe von Artikeln zur Optimierung und Verbesserung der Leistung von GWT-Anwendungen. Da ich viel Material angesammelt habe, habe ich beschlossen, es in 2-3 Teile zu zerlegen.
    Wir beschreiben im ersten Artikel, was uns erwartet.

    Fragen angesprochen werden


    Im ersten Teil einer Artikelserie zur Optimierung von GWT-Anwendungen werde ich auf Folgendes eingehen:
    • Client-Code-Trennung, On-Demand-Download
    • Abschaffung der Verwendung schwerer Klassen auf dem Client
    • Ressourcen-Caching
    • GWT-RPC-Leistungsprobleme bei Verwendung von REST
    • Merkmale des Einflusses des Layouts auf die Anwendung
    • Getriebeoptimierung
    • Scheduler verwenden
    • Verwenden von Dispatchern zum Aggregieren von Serveranforderungen

    Und nun im Detail zu jedem der genannten Punkte.

    Client-Code-Trennung, On-Demand-Download


    GWT verfügt über einen integrierten Mechanismus, mit dem der Entwickler die Anwendung in Teile zerlegen kann. Dies ist vor allem zu folgenden Zwecken erforderlich:
    • Reduzieren der Anfangsgröße der heruntergeladenen Daten
    • Nach dem Prinzip des verzögerten Ladens - die erforderlichen Daten werden von der Anwendung bei Bedarf heruntergeladen

    Для того, чтобы разделить клиентский код на части, используется вызов метода GWT.runAsync.
    Пример использования runAsync:

    GWT.runAsync(new RunAsyncCallback() {
        public void onSuccess() {
          new MySettingsDialog().show();
        }
        public void onFailure(Throwable ohNoes) {
          // indicate that something went wrong,
          // usually a connectivity or server problem
        }
      });
    

    При этом компилятор GWT берёт на себя обязанность не только произвести работу по разделению клиентского кода, но также проанализировать, как необходимо кластеризовать код. Гарантируется, что разделение будет корректным. Однако, разделения может и не произойти. Причиной этому могут быть перекрёстные ссылки в коде.
    В презентации GWT Can Do What с Google I/O можно увидеть сравнение скорости загрузки приложения до и после разрезания его на части с использованием runAsync:



    Таким образом, использование runAsync серьёзно может уменьшить первоначальное время загрузки приложения и уменьшить количество передаваемых на клиент данных.
    Es lohnt sich, auf die AsyncProxy-Klasse zu achten. Wahrscheinlich werde ich seine Beschreibung im zweiten Teil des Artikels geben, jetzt können Sie ihn gemäß seiner Dokumentation kennenlernen .

    Abschaffung der Verwendung schwerer Klassen auf dem Client


    Auf der Google Web Toolkit-Gruppenseite finden Sie eine Diskussion über Möglichkeiten zum Reduzieren der Größe der kompilierten GWT-Anwendung. Insbesondere wird ein Ansatz erwähnt, der darin besteht, die Verwendung von "schweren" Klassen auf der Clientseite abzulehnen, was die Einbeziehung einer großen Menge an Code auf der Clientseite zur Folge hat.
    Zunächst können wir ein Beispiel für die Verwendung von Comparator auf dem Client geben. Bei Verwendung werden im Client ca. 10 KByte codebezogene Klassen eingeschlossen.
    Die Verwendung von RequestFactory führt zu einer noch größeren Zunahme des Clients - in der oben erwähnten Diskussion erhöhte sich der Client-Anteil um 150 KB.
    Vorsicht ist auch bei der Verwendung von externen Modulen geboten - es ist durchaus möglich, dass deren Einbeziehung in das Projekt aufgrund der Hinzufügung vieler weiterer Klassen zu einer deutlichen Erhöhung des Kundenanteils führt.

    Ressourcen-Caching


    Clientseitige HTTP-Anforderungen sind erhebliche Leistungseinschränkungen auf der Clientseite der Anwendung. Wenn die Anwendung jede Ressource separat anfordert, ist die Gebühr für das Herunterladen aller Ressourcen hoch.
    Um eine Verlangsamung der Clientanwendung zu verhindern, wird ein Ansatz zum Zwischenspeichern von Ressourcen verwendet.
    GWT hat einen Mechanismus namens ClientBundle. ClientBundle speichert verschiedene Arten von Ressourcen (Text, Grafik, CSS und andere). Lesen Sie hier mehr über ClientBundle .
    Vorteile des ClientBundle-Ansatzes:
    • Die erforderliche Ressource wird einmal geladen, anstatt jedes Mal, wenn sie verwendet wird, geladen zu werden
    • Die Gesamtmenge der gespeicherten Ressourcen wird geringer sein

    Wie funktioniert das Minimieren des Ressourcenspeichers mit ClientBundle?
    Zurück zur GWT Can Do What-Präsentation. Darin sehen wir die folgende Abbildung:



    Dadurch wird der Aufwand zum Speichern der gleichen Daten verringert.
    Wie können dadurch Ressourcen eingespart werden?



    GWT-RPC-Leistungsprobleme bei Verwendung von REST


    GWT RPC ist ein sehr praktisches Tool. Es bietet eine Schnittstelle zum Organisieren von Client- und Server-Code für den Service und wird von der IDE unterstützt. Dies ist eine der erstaunlichen Funktionen beim Erstellen von AJAX-Anwendungen in GWT. Es lohnt sich jedoch zu überlegen, ob es zu Ihnen passt.
    Die Hauptnachteile bei der Verwendung des GWT-RPC können das Hinzufügen zu vieler redundanter Daten zur Anforderung und die Komplexität des Debuggens sein.
    Die Verwendung von REST kann als Lösung für diese Probleme angeführt werden. In einem Artikel von Zack Grossbart finden Sie ein Beispiel für die Verwendung von REST für GWT-Projekte.
    Gleichzeitig werden in seinem Artikel 4 Weitere GWT-Antimuster die Hauptvorteile von REST aufgeführt:
    • REST zwingt den Entwickler, über die API nachzudenken. Die API kann auch externen Diensten und Anwendungen zur Verfügung gestellt werden und bietet zusätzlichen Komfort und Funktionen für die Interaktion.
    • Usability-Tests
    • Klare Trennung von Client und Server

    Merkmale des Einflusses des Layouts auf die Anwendung


    Sehr oft verwenden GWT-Entwickler das Layout für die automatische Anpassung. Ein Beispiel hierfür ist die Verwendung von height = "100%" in Komponenten. Es ist anzumerken, dass contentHeight, offsetHeight schwere Operationen sind. Das Folgende ist die IEH-Laufzeitstatistik offsetHeight, die der Darstellung "Measure in Milliseconds" von Google I / O 2009 entnommen wurde:



    Nicht nur das Ergebnis des Vorgangs wird schlecht vorhergesagt. sein Spitzenwert für 18 Messungen erreichte einen Wert in der Größenordnung von 85 ms.
    Die vollständige Verarbeitung des Größenänderungsereignisses dauert einige Zeit. Häufig dauert die Größenänderung bei erzwungenem Layout um ein Vielfaches länger als die Neuberechnung des Stils.
    Wie können Sie dieses Problem beseitigen? Sie müssen CSS verwenden. Ein CSS-definiertes Layout wird viel schneller gerendert, sodass keine Schwergewichtsmethoden wie offsetHeight für die gesamte DOM-Hierarchie der Komponenten aufgerufen werden müssen.
    Sie können ein aktualisiertes DockPanel verwenden, das während der Größenänderungsoption kein JavaScript verwendet.

    Es wird dringend davon abgeraten, große Bäume verschachtelter Widgets zu erstellen und zu speichern. Widgets haben einen zusätzlichen Overhead, der sich negativ auf den verwendeten Speicher und die Größe des Clients (als Ergebnis und Geschwindigkeit) auswirkt. Sie können HTMLPanel als Lösung verwenden. Um die Anzahl der Widgets auf Seiten zu verfolgen, gibt es ein InspectorWidget-Tool. Informationen zu den Eigenschaften des Plugins finden Sie auf seiner Seite .

    Getriebeoptimierung


    Serialisierbare Objekte werden ständig zwischen Client und Server übertragen. Der Entwickler sollte sich fragen: Werden wirklich nur die nötigsten Daten übertragen? Große Diagramme von Objekten, verschachtelten Unterobjekten und unnötigen Parametersätzen nehmen wertvolle Zeit in Anspruch und verursachen eine zusätzliche Belastung. Übertragen Sie nur das, was Sie auf dem Client benötigen. Oft nur das, was der Benutzer sieht. Alles, was Sie brauchen, finden Sie bei Bedarf in den Daten. Dieser Ansatz sollte natürlich nicht der Politik des Zwischenspeicherns von Ressourcen auf der Clientseite widersprechen.

    Scheduler verwenden


    GWT verfügt über einen Mechanismus für ausstehende Anrufe. Zuvor als DeferredCommand bezeichnet, wurde es als veraltet deklariert. Jetzt heißt der Mechanismus Scheduler.
    Der Scheduler stellt tatsächlich eine Klasse zum asynchronen Ausführen einer Aktion bereit. Es ist garantiert, dass die Aktion nach dem Ende der Ereignisschleife des Browsers ausgeführt wird.
    Vorteile:
    • Blockiert nicht den Thread der Ausführung
    • Ermöglicht das Abschließen der ersten UI-Ereignisse.

    Sehr oft wird Scheduler bei der späten Erstellung einiger Objekte verwendet. Die kompetente Verwendung beschleunigt jedoch in einigen Fällen die Anwendungsbenutzeroberflächen, da Benutzeroberflächenereignisse stärker priorisiert werden.

    Verwenden von Dispatchern zum Aggregieren von Serveranforderungen


    Jeder Aufruf des Servers führt zu einer gewissen Verzögerung bei der Ausführung. Wenn wir den Server häufig mehrmals anrufen müssen, können wir sie zu Batch-Einheiten zusammenfassen.
    Ab Version 2.3 kann das GWT RequestFactory verwenden: Die Vorteile dieses Ansatzes liegen auf der Hand : Die Anzahl der Aufrufe und damit die Verzögerung bei der Ausführung wird erheblich reduziert. Wenn wir Serverantworten zwischenspeichern können, können wir Caching-Manager verwenden. Sie können sich über deren Verwendung informieren, indem Sie auf den Link klicken .

    requestContext.method1().to(new Receiver(){...});
    requestContext.method2().to(new Receiver(){...});
    requestContext.fire(new Receiver(){...}); //called only 1
    




    Abschließend


    GWT ist ein leistungsstarkes Tool, mit dem Sie eine hervorragende browserübergreifende Oberfläche erstellen können. Es wird bereits außerhalb von Google häufig verwendet. Einige der praktischsten Tools schränken jedoch die Anwendungsleistung erheblich ein. Die Geschwindigkeit der Anwendung muss sorgfältig optimiert werden, damit die Benutzer auch mit der Arbeit zufrieden sind.
    Im nächsten Artikel werde ich mich weiter mit den Funktionen zur Leistungsverbesserung und Optimierung von GWT-Anwendungen befassen. Insbesondere werden sie Möglichkeiten zur Verbesserung der Geschwindigkeit von GWT RPC, JS Shrink, Funktionen zur Verwendung von nativem Code auf dem Client und Tipps zur Reduzierung der Skriptgröße prüfen. Es ist auch geplant, über die Optimierung der Kompilierungsgeschwindigkeit zu sprechen und einige Tipps zum Oberflächenlayout zu geben.

    Vielen Dank für Ihre Aufmerksamkeit!

    Полезные ресурсы:
    1. static.googleusercontent.com/external_content/untrusted_dlcp/www.google.com/en//events/io/2011/static/presofiles/drfibonacci_devtools_high_performance_gwt.pdf
    2. dl.google.com/io/2009/pres/W_1115_GWTCanDoWhat.pdf
    3. dl.google.com/io/2009/pres/W_1230_MeasureinMilliseconds-PerformanceTipsforGoogleWebToolkit.pdf
    4. turbomanage.wordpress.com/2010/07/12/caching-batching-dispatcher-for-gwt-dispatch
    5. www.zackgrossbart.com/hackito/antiptrn-gwt
    6. www.zackgrossbart.com/hackito/antiptrn-gwt2
    7. www.zackgrossbart.com/hackito/gwt-rest
    8. habrahabr.ru/blogs/gwt/99614

    Jetzt auch beliebt: