Wer schon einmal mit ExtJS 4 eine kleine MVC-Applikation erstellt hat kennt das Performance-Problem des Frameworks. Auch wenn die Performance mit ExtJS 4.1 ein wenig schneller geworden ist und besonders mit der erhöhten Geschwindigkeit neuerer Browser-Engines das Problem relativiert wird, lohnt sich die Beschäftigung mit SenchaCMD.
SenchaCMD wird von Sencha – also der Firma hinter ExtJS – entwickelt und beschäftigt sich mit der Performance-Verbesserung in ExtJS (und auch in SenchaTouch). Die Verbesserungen werden dabei durch das Vorkompilieren der JavaScript und CSS-Daten erreicht. Dabei werden beispielsweise nicht benötigte Klassen des ExtJS Frameworks aus der ausgelieferten Datei beseitigt und der Inhalt mehrere Dateien zusammengefasst.
Somit wird nicht nur die Anzahl der Requests an den Server verringert, sondern auch der übertragene Inhalt verkleinert.
In einem ersten Test konnte die benötigte Dateigröße deutlich reduziert werden. So würden ohne SenchaCMD mindestens drei Requests für JS-Dateien benötigt, welche zusammen in etwa 1.3MB benötigten, nach der Abarbeitung durch SenchaCMD jedoch nur mehr knapp 890KB in einem einzigen Request. Also immerhin eine Reduktion um ca. 30%.
Weniger Vorteile scheint die Reduktion von CSS-Daten zu bringen. Ohne SenchaCMD liefert man hier typischerweise zwei CSS-Dateien (eine ext-all.css und eine app.css), welche zusammen meist knapp 250KB beanspruchen. Nach einem Durchlauf von SenchaCMD benötigten die Daten immer noch knapp 230KB (also reden wir bei CSS von einer Verkleinerung um „nur“ ca 10%).
Vergessen darf man aber nicht, dass durch den Einsatz von SenchaCMD mit sass gearbeitet werden kann. Dadurch gewinnt man zwar an Geschwindigkeit nichts, aber die Anpassung von Themes wird deutlich vereinfacht.
Einen sehr großen Vorteil, welchen SenchaCMD bietet, übersieht man aber leider sehr schnell. Durch das Zusammenpacken aller benötigten ExtJS-Klassen mit dem eigenen JS-Code erhält man eine einzelne, lauffähige JS-Datei.
Diese kann sehr effizient durch einen Webserver ausgeliefert werden (durch das Komprimieren der Daten vor der Übertragung am Webserver kam ich in ersten Tests auf unter 300KB JS-Code) und auch am Client besonders einfach gecached werden.
Braucht der Seitenaufbau einer ExtJS4-MVC-Applikation selbst mit modernen Browsern etwas mehr als eine Sekunde, so kann die benötigte Zeit durch Caching weiter reduziert werden. So werden auch unter Berücksichtung von ein paar Bildern und CSS-Auslieferungen Zeiten im Bereich von 100-200ms erreicht.
Weitere Verbesserungen kann man beispielsweise durch das Zusammenfassen von Bildern zu einem einzigen (man spricht hier von „Sprites“) erreicht werden, es muss aber auch hier im Einzelfall unterschieden werden, ob dies Sinn macht.
Weiterführende Literatur zum Thema ExtJS-Performance-Optimierung findet man direkt in der Dokumentation von ExtJS. Des Weiteren gibt es natürlich auch andere Ansätze zur Beschleunigung von Webseiten-Ladezeiten. Ein bekanntes Framework im Java-Umfeld (Java kommt ja oft auf der Server-Seite zum Einsatz) ist beispielsweise JAWR. Ebenso gibt es im Browser kleine Plugins, mit der man die Ladezeiten ermitteln kann und erhält bei manchen Plugins wie „Y-Slow“ sogar Vorschläge, was man verbessern könnte