Die Performance im Frontend (View) ist wichtig. Bei einer Reaktionszeit von einer Sekunde hat der User noch das Gefühl, die Website reagiere unmittelbar. Die Aufmerksamkeit des Users sinkt mit der Sekunde, die dazu kommt.
Wie man die Performance bei AJAX-lastigen Website verbessern kann, zeige ich hier am Beispiel auf:
One-Page-App Beispiel
Beim Medela Locationfinder handelt es sich um eine one-page-app. One- oder Single-page-apps sind Webanwendungen, welche ohne Page Reloads (Seitenwechsel) auskommen und deren Anzeige nur mittels Javascript und DOM-Eingriffen verändert wird.
Keine Page Reloads
One-Page-Apps sind effizient, da Page Reloads durch asynchrone Sub-Requests (AJAX) ersetzt werden. Im Idealfall merkt der User gar nichts von den AJAX Abfragen zwischen View und Controller. Bei solchen Abfragen kann es jedoch schnell zu Performance Engpässen kommen, was vor allem bei älteren Browsern (z.B. IE6) zu Problemen führen kann.
Die Kommunikation kann optimiert werden, in dem das richtige Datenformat gewählt und die Menge der Daten reduziert wird. Bei AJAX Requests ist JSON das bevorzugte Format. JSON hat zwei Vorteile gegenüber XML:
- Es ist schlanker und
- lässt sich von Javascript schneller verarbeiten.
Rails kann zaubern
Ruby On Rails stellt Methoden für die Umwandlung von Model in JSON (to_json) und XML (to_xml) zur Verfügung. Dies funktioniert auch bei Assoziationen oder ganzen Objektgraphen.
>> l = Location.last
=> #<Location id: 1, name: "Apotheke im...
Vergleicht man die Menge der Daten bei der Ausgabe von JSON mit XML, so kann man den Unterschied erkennen. Nur 45% macht JSON von XML aus!
=> 1814
>> l.to_json().size
=> 843
Der Vergleich bei 500 Suchtreffern (5 Suchen à 100 Treffern):
XML: 885.74 KB (1814 * 500 / 1024)
JSON: 411.62 KB (843 * 500 / 1024)
JSON reduziert den Datenverkehr um fast ein halbes MB und das bei nur fünf Suchen!
Die Zauberformel
Die Serialisierung des Models im Controller nach dem Builder Pattern ist mit Ruby On Rails einfach und schnell realisiert. Neben to_xml und to_json gibt es Umwandlungs-Methoden wie to_yaml, to_atom, to_feed, to_rss u.v.m, für die teilweise auch ein Plugin notwendig ist.
Fazit
Die View wird durch JSON im Zusammenhang mit AJAX schneller. Diesen Performance-Boost spürt der User direkt und steigert die Qualität der Software. Als Entwickler hat man mehr Spass an der Arbeit und kommt mit wenig Aufwand zu besseren Resultaten.
Write less, code more.
Sehr cool ist der Grössenvergleich XML versus JSON.
Hast Du eine Idee wieviel der Unterschied nach einer gzip oder deflate Übertragung via HTTP wäre. Resp. hat mach sich bewusst dagegen entschieden die Response zu komprimieren?
Hallo Jürg
Ein guter Punkt der übrigens auch von Yahoo als Best Practice empfohlen wird. Bewusst haben wir uns nicht dagegen entschieden aber es wäre auf jeden Fall ein Schritt zur Verbesserung. Ob der Unterschied zwischen komprimiertem JSON und XML immer noch so gross ist kann ich nicht sagen, würde mich aber auch interessieren.
Hallo zusammen,
beim locationfinder von Medela haben wir die Infrastruktur für gzip, deflate ausgelegt.
Jeder Client, der Komprimierung unterstützt, kann zusätzlich von gzip oder deflate profitieren.
Die Rechen-Beispiele im Post beziehen sich in der Tat nur auf unkomprimierte Kommunikation.
Gruss, Jean-Pierre