Mittlerweile existiert eine große Anzahl an Javascript Frameworks mit eigenen Stärken und Schwächen. Bei der Entscheidung welches man einsetzt, spielen viele Faktoren eine Rolle. Neben dem Funktionsumfang ist die Größe des zu ladenden Javascripts und die Länge des nötigen Codes sicher ein wichtiger Aspekt, den man berücksichtigen sollte. Außerdem spielt die Geschwindigkeit beim Zugriff auf einzelne DOM-Elemente eine große Rolle, denn die meisten “Web 2.0″-Effekte und Funktionen, die mit JavaScript erreicht werden, setzen eine Manipulation des DOM voraus.

Beim Smashing Magazine bin ich letzten Monat über einen Geschwindigkeitest für JavaScript-Frameworks der Macher von MooTools gestolpert, den man sich bei Google Code runterladen kann. Dieser vegleicht die Zugriffsgeschwindigkeit auf DOM Elemente via CSS-Selektoren.

Daraufhin habe ich mich hingesetzt und auf verschiedenen Browsern und Betriebssystemen gängige JS-Frameworks in ihrer Performance verglichen. Die Ergbenisse sind zum Teil recht erstaunlich.

Beurteilung des Tests

Die verglichenen Frameworks laufen unabhängig voneinander jeweils in einem eigenen IFrame, was Seiteneffekte untereinander quasi ausschließt. Ein zusätzliches Zeitinterval zwischen jedem der vordefinirten Selektor-Tests sorgt zudem dafür, dass die JavaScript-Engine des Browsers nicht über die Maßen beansprucht wird. Die Liste der getesteten CSS-Selektoren und der verwendeten JS-Frameworks lässt sich einfach erweitern.

Die technische Basis ist also generell sehr solide. Kritik habe ich aber an einigen Punkten:

• Das erwartete korrekte Ergebnis jedes Selektortests sollte sichtbar sein.
• Die Liste der enthaltenen Frameworks war nicht auf dem neusten Stand, was kein Problem an sich darstellt, aber gerade weil der Test sich auch auf der Seite von MooTools direkt aufrufen lässt, sollte hier schon auf Aktualität geachtet werden oder sich zumindest ein Hinweis finden.
• Die enthaltenen Frameworks liegen in unterschiedlichen Zuständen vor. Einige im Original, einige von Kommentaren befreit und einige in komprimierter Form. Gerade die Kompression kann dazu führen, dass einige Tests deutlich langsamer ablaufen. Ein Test mit der komprimierten JQuery1.1.3-Verison führte zwar nicht zu signifikanten, wohl aber zu messbaren Unterschieden (719ms packed, vs. 647ms unpacked auf Firefox2/Win). Leider habe ich das erst später gemerkt, so dass auch meine Tests unterschiedlich stark gepackte Frameworks enthalten.
• Außerdem scheinen die Frames doch nicht komplett unabhängig voneinader zu arbeiten, denn wenn man nur einen Test zur Zeit fährt, erhält man abweichende Ergebnisse.

Testaufbau

Getestet habe ich folgende Frameworks:

• Prototype 1.5
• JQuery 1.1.2dev
• JQuery 1.1.3 (zum Vergleich von mir hinzugefügt, weil die Version laut Jquery Blog deutlich performanter ist)
• MooTools 1.2dev
• extJs 1.1b1
• CssQuery 2.02
• DojooQuery

Getestet wurde auf folgenden Betriebssystemen und Browsern:

• Firefox 2 - Windows XP, MacOS X, Ubuntu 6.5
  
• Internet Explorer 6 - Windows XP
  
• Internet Explorer 7 - Windows Vista
  
• Safari - MacOS X, Windows XP
  
• Opera 9.21 - Windows XP
  
• Konqueror - Ubuntu
  

Die Windows-XP Tests liefen alle auf dem gleichen Notebook, die anderen Tests auf anderen Maschinen mit teils höherer CPU-Leistung. Die ermittelten Werte aus den Tests sind also nur relativ vergleichbar, nicht in den absoluten Zahlen. Wer diesen Test wirklich vergleichbar machen möchte, sollte alle relevanten Betriebssysteme in einer Virtual Mashine auf dem gleichen Rechner zu installieren.

Messergebnisse

Tabelle der Messergebnisse

Messergebnisse als Diagramm

Firefox vs. Internet Explorer

JQuery vs. Prototype

Messergebnisse im Detail

Prototype 1.5.1

Riesige Geschwindigkeitsuntershiede zwischen Firefox und Internet Explorer. Auf IE 6 ca. 10 mal langsamer, auf IE7 ca. 5 mal langsamer als auf Firefox. Auf Firefox fast gleichschnell mit Moo und somit dort Geschwindigkeitssieger. Auf Safari und Opera ebenfalls sehr schnell.

Größe des Frameworks (ungepackt): 97 KB.

Varianz: 16,1

Fehlerquote: Zwischen 3 und 5 Fehlern je nach Browser

Exceptions: 2, nur auf Internet Explorer, inkompatibel mit Konqueror

JQuery 1.1.2 dev

Ca. 10 mal langsmer als Prototype unter Firefox und Opera und immer noch doppelt so langsam unter IE6 und 7. Konstant unter IE und FF. Größe (ungepackt) 61KB. Insgesamt ist nur CSS Query langsamer. Außerdem scheint die Engine über alle kompatiblen Browser hinweg konstant die gleichen Fehler zu produzieren.

Größe des Frameworks (ungepackt): 61 KB.

Varianz: 7,3

Fehlerquote: Konstant 1 Fehler

Exceptions: 4 auf allen Browsern, inkompatibel mit Konqueror

JQuery 1.1.3

Die kleine Versionsänderung führ zu riesigen Geschwindigkeitssprüngen: Insgesamt ca. 5 - 10 mal schneller als sein Vorgänger und über alle Browser hinweg sehr konstant. Deutlicher Gesamt-Geschwindigkeitssieger auf Internet Explorer 6 und 7.

Größe des Frameworks: 63 KB (ungepackt), 21KB (gepackt).

Varianz: 5,8

Fehlerquote: Konstant 1 Fehler

Exceptions: 0, inkompatibel mit Konqueror

MooTools 1.2 dev

MooTools ist der Geschwindigkeitssieger unter Firefox und liegt bei Operaund Safari nur ganz knapp hinter Prototype. Leider zeigt auch Moo auf dem Internet Explorer deutliche Schwächen und ist hier 5 - 10 mal langsamer als auf Safari oder Firefox. Außerdem überzeugt das Framework durch seine Kompaktheit.

Größe des Frameworks (ohne Kommentare): 37 KB.

Varianz: Faktor 13

Fehlerquote: 1-2 Fehler

Exceptions: Konstant 1, inkompatibel mit Konqueror

ExtJs 1.1b1

Insgesamt ist Ext das Framework mit den meisten Exceptions, die wirft es allerdings konstant über alle getestetn Browser. Von den Frameworks, die acuh unter Konqueror funktionieren ist es aber das Performanteste. Nicht überzeugen kann die riesige Größe von 119 KB.

Größe des Frameworks (gepackt): 119 KB.

Varianz: Faktor 8,5 (als einziges Framework am langsamsten auf Firefox/Ubuntu)

Fehlerquote: Konstant 3

Exceptions: Konstant 5

CssQuery 2.02

CssQuery ist über alle Browser hinweg mit Abstand das Langsamste der getesteten Frameworks und liefert darüber hinaus am häufigsten falsche Ergebnisse. Dafür ist es eines der drei Frameworks, die auch Konqueror unterstüzen und ist wirklcih “lightweight”. Es muss geprüft werden, ob die gepackte Version nicht evtl. zu den deutlichen Gescwindigkeitsunterschieden führt.

Größe des Frameworks (gepackt): 7 KB.

Varianz: Faktor 10

Fehlerquote: 4-8 Fehler

Exceptions: Konstant 1

Dojo Query

Dojo Query landet insgesamt im vorderen Mittelfeld und überzeugt durch die geringste Varianz zwischen den Browsern und seine relative Kompaktheit. Außerdem läuft es auch auf Konqueror.

Größe des Frameworks (gepackt): 44 KB.

Varianz: Faktor 5,5

Fehlerquote: Konstant 1

Exceptions: 3-4

Fazit

Mein Favourit heißt JQuery 1.3.1 Es ist sehr kompakt und erzielt über alle Browser hinweg konstante Ergbenisse ohne große Ausfälle. Ähnlich gute Ergebnisse liefert DoJo Query - der 2. Sieger wg. mehr Fehlern und insgesamt etwas höherer Größe (44Kb gepackt vs. 23Kb gepackt). Die Performance der Frameworks mit den absolut besten Werten, Moo und Prototype lässt unter dem Internet Explorer leider zu wünschen übrig, ansonsten sind beide ebenfalls top und unter Safari und Firefox auch extrem performant. CSS Query ist aus dem Rennen. ExtJS ist leider relativ fehleranfällig und auch relativ groß. Eventuell ändert sich das mit dem neuen Release.

Der Gewinner unter den Browsern ist eindeutig Safari. Seine JavaScript-Engine hängt die der anderen Browser um Längen quer über alle Frameworks ab und ist dabei zum Teil bis zu 16 mal schneller als der Internet Explorer 6. Man sollte hoffen, dass diejenigen Windows-Nutzer, die immer noch den IE6 benutzen, zumindest schnell zum IE7 wechseln, denn dessen JS-Engine arbeitet immerhin 2-3 mal schneller. Wer auch Konqueror unterstützen möchte liegt mit Dojo Query wohl am besten. Der Geschwindigkeitssprung von Jquery 1.1.2auf 1.1.3 zeigt, dass mit neuen Versionen der Framework deutlich andere Ergebnisse möglich sind, weshalb dieser Test auch nur eine (bereits veraltete) Momentaufnahme darstellen kann.