GWT Blog-Serie – Wie GWT die maximale Leistung des Browser nutzt (2/4)

Im ersten Teil meiner Serie ging ich auf eine Umfrage über die Zukunft von GWT ein und beschrieb in Kürze, was GWT ist.
Ab 100 Zeilen JavaScript Code soll GWT besser optimiert sein, als würde man den Code selber schreiben. In diesem Teil der Serie, werde ich dieser Aussage auf den Grund gehen.

Performance von GWT dank Compiler

Sobald eine Web Anwendung gebaut wird, welche mehr als 100 Zeilen JavaScript Code verwendet, kann man davon ausgehen, dass GWT den besseren Code auswirft als würde man den Code selber in JavaScript schreiben. Verblüffende Aussage nicht wahr? Ich würde von mir behaupten, dass ich in der Lage sei, bei einem JavaScript von lediglich 100 Zeilen Code, ein Script zu schreiben, welches keine Performance-Leaks umfasst. Doch warum sollte ein von GWT optimiertes JavaScript performanter sein? Der Grund liegt im Java-zu-JavaScript Compiler. Dieser Compiler beschränkt sich nicht darin, den Code perfekt zu minifizieren und zu strukturieren, er offeriert noch einiges mehr.

Features des GWT Compilers:

  • Compile per Browser/Device
  • Dead Code Removal
  • Inlining
  • Renaming
  • Zipping
  • Secure caching

Compile per Browser/Device

Damit die Performanceoptimierung für jeden Benutzer ausgereizt werden kann, wird das JavaScript für jeden unterstützten Browser kompiliert. Dieser kompilierte Code enthält dann alle verwendeten JavaScript und CSS Ressourcen, welche genau für diesen Browser notwendig sind.

browsers

Quelle: http://diminiinc.blogspot.ch/2013/08/windows-browsers-comparison-august-2013.html

Beispiel JavaScript Optimierung vom GWT Compiler

Ein kleines Muster des Vorgangs der Code-Optimierung vom GWT-Compiler. Dieser Code sieht auf den ersten Blick gut strukturiert und performant aus.

Shape s = new Rectangle (2,4); //2 = Breite, 4 = Höhe
int a = s.getArea();

Aber es geht noch besser.

In einem ersten Schritt analysiert der GWT-Compiler den Code. Er erkennt dass es sich bei s.getArea() um die Funktion getArea von einem Rectangle -Objekt handelt. Mittels inlining wird der Code modifiziert:

Shape s = new Rectangle(2);
int a = s.height * s.width;

Jetzt gehts weiter. Der GWT-Compiler fasst die zwei Zeilen zu einer zusammen.

int a = 8;

Somit wird aus dem zweizeiligen Code ein Einzeiler mit einer simplen Konstanten.

Dead Code Removal

Dafür will ich gerne ein Beispiel bringen. Als Frontend Engineer ist man sich gewöhnt auf mächtige Libraries zurück zu greifen. Als Populärstes kann ich ohne bedenken auf  jQuery verweisen. Eine sehr gute Library mit beinahe allen Features, welche man sich als Frontend Engineer wünschen kann. Die Fülle an Features bringt aber auch Nachteile mit sich. Die aktuellste, komprimierte Version (2.0.3) wiegt 84 KBytes. Auch wenn nur wenige Funktionen der Library genutzt werden, muss der ganze Inhalt vom Browser herunter geladen werden. Dead Code Removal ist ein Feature von GWT, welches dieses Problem angeht. Der GWT-Compiler löscht den Code der nicht verwendet wird aus der Anwendung raus, so dass der Download auf ein Minimum beschränkt werden kann.

CodeRemovel

Dead Code Removal beschränkt sich nicht nur auf das JavaScript. Auch die CSS Ressourcen werden optimiert ausgeliefert. Wird die Web-Anwendung von einem Webkit-Browser gestartet, werden nur CSS Regeln ausgeliefert, welche dieser Browser kennt. GWT löscht alle nicht verwendeten CSS Regel beim Kompilierungsvorgang.

css

Code Sharing

In komplexen JavaScript Anwendungen, in welcher mehrere Entwickler gleichzeitig entwickeln, wiederholt sich Code unweigerlich. Der GWT-Compiler greift ein und optimiert den Code so, dass gleicher Code nur einmal verwendet wird.

Das führt dazu, dass sich die Grösse vom ausgelieferten JavaScript File logarithmisch verhält. Je nach dem wie viele Widgets verwendet werden, desto mehr Code kann geteilt werden – desto kleiner wird somit auch das Wachstum des JavaScript Outputs.

Wachstum von JS-Datei

Quelle: Writing Big Applications with Google Web Toolkit, 2007, Bruce Johnson, Google Inc.

Runtime-Performance

Da GWT Anwendungen komplett als JavaScript ausgeführt werden, scheint es als könnte man hier nicht viel optimieren. Die Optimierungen fallen hier vor allem im Markup und im Stylesheet an. JavaScript ist der grösste Performancekiller im Browser. Denn die Ausführung beansprucht sehr viel CPU Zeit und Batterieleistung.

SourceCode

Auszug aus Quellcode einer GWT Seite

Das blau markierte div-Element beinhaltet die CSS-Klasse „ata-asE“. Wer nennt denn eine CSS Klasse „ata-asE“? Niemand (hoffentlich). Diese Klassennamen werden so vom GWT-Compiler kompiliert. Stylesheet können viel effizienter verarbeitet werden, wenn keine langen Selektoren verwendet werden.

Im nächsten Teil meiner Blog-Serie werde ich auf GWT im mobilen Umfeld eingehen und dabei ein Vergleich zu jQuery Mobile und Sencha Touch ziehen.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>