Nico Steiner - Frontend-Entwicklung und -Architektur

Sonntag, 7. Februar 2010

Qooxdoo Low-Level APIs

Mittlerweile setzen wir in fast allen unseren Bestellprozessen die Low-Level APIs von Qooxdoo als JavaScript-Framework ein. Neben klassischen Anwendungen wie Event-Handling oder DOM-Manipulationen kommen auch komplexere Elemente wie Lightboxen, Autocompletions oder Slider zum Einsatz. Die folgenden Screenshots dokumentieren den flexiblen Einsatz dieser Elemente.

Geschrieben von Nico Steiner in Referenzen um 23:34 | Kommentare (0) | Trackbacks (0)

Expires Header besser verstehen

Anhand eines unserer aktuellen Projekte möchte ich zeigen, wie die genannte Technologie in Hinblick auf die Performance einer Website zu verstehen ist.

Folgende Statistik habe ich mit der Firefox Extension YSlow erstellt. Oben ist die Verteilung der Ressourcen bei einem ersten Request mit leerem Cache zu sehen. Der Bereich darunter zeigt die Verteilung bei einem zweiten Request unter Ausnutzung des Caches.



Der obere Bereich zeigt die typischen Ressourcen einer Seite. Etwas ungewöhlich sind die 2 XML-HTTP-Requests. Dahinter verbergen sich JavaScripte, welche asynchron mit der Managed XHR Technik von Steve Souders in die Seite integriert werden.

Interessanter in Bezug auf die erwähnte Technologie ist der untere Bereich, nutzt man Expires Header doch, um das Caching-Verhalten einer Seite positiv zu beeinflussen. Hier ist zu sehen, dass Scripte und Stylesheets nicht mehr aufgeführt werden. Dies ist wenig verwunderlich, da wir diese bereits mit Far Future Expires Headern versehen haben.



Das Neuladen des HTML-Dokuments ist gewollt und wird mit einem in der Vergangenheit liegenden Expires Header erzwungen. Wir erzwingen für diesen Fall das Neuladen, da das Dokument dynamisch generiert wird und sich von einem Aufruf zum nächsten verändern kann.

Neben dem HTML-Dokument erzeugen sämtliche Grafiken der Seite erneut Requests. Bei diesen steht die Auslieferung eines Expires Header momentan noch aus. Was im ersten Moment nur nach einer Einstellung in den Apache-Konfigurationen klingt, wird auf den zweiten Blick sehr viel komplexer, möchte man durch eine möglichst transparente Versionierung der Grafiken ein Neuladen bei Veränderungen erzwingen. Zumindest ist durch korrekte ETags sichergestellt, dass lediglich Requests in Form eines Conditional GET gemacht werden - die Daten selbst werden also nicht erneut übertragen. Allerdings braucht solch ein Request für den gesamten Roundtrip auch etwas Zeit - bei 40 Requests macht das in einem modernen Browser wie dem Firefox immer noch ganze 2 Sekunden aus!

Geschrieben von Nico Steiner in Referenzen um 16:14 | Kommentare (0) | Trackbacks (0)