jQuery 1.4 setzt auf Tempo

Längst hat sich jQuery zu einem der beliebtesten und meistgenutzten JavaScript-Frameworks entwickelt. Die aktuelle Version 1.4 implementiert zahlreiche Neuerungen. Darüber hinaus soll sie aber vor allem eines sein: deutlich schneller als ihre Vorgänger.

Vier Jahre ist es seit der Veröffentlichung der ersten jQuery-Version her. Wer die letzten Major-Releases des Frameworks beobachtet hat, konnte feststellen, dass es jedes Mal signifikante Überarbeitungen gab. Beispielsweise führte jQuery 1.3 Sizzle und die .live()-Methode für das Eventhandling ein. Zu den enormen Veränderungen der neuen Version zählen nicht nur zusätzliche Methoden und Funktionen, gerade auch die Performanceverbesserungen sprechen für jQuery 1.4.

Aus dem geplanten kleinen Release ist eine vollwertige neue jQuery-Version geworden. Gerade der Aspekt wirft die berechtigte Frage nach Inkompatibilitäten auf, die bei einem Umstieg von jQuery 1.3 auf die 1.4er-Version auftreten können. Darauf geht der Artikel noch genauer ein, so viel aber bereits hier: In der Tat muss man einige Dinge beim Upgrade beachten. Das gilt jedoch nicht für die breite Masse der Webentwickler, da die Inkompatibilitäten allein im Zusammenhang mit Funktionen und Anwendungen auftreten, die nicht weit verbreitet sind. Sollte es dennoch zu Problemen kommen, gibt es ein Plug-in, das die Entwickler speziell für den Zweck entwickelt haben.

Paket voller Neuerungen

Die Website zum 1.4er-Release Einen ersten Eindruck zum neuen Framework kann man sich auf der eigens eingerichteten Website "The 14 Days of jQuery" verschaffen. Sie riefen die jQuery-Entwickler während der finalen Entstehungsphase ins Leben. Über 14 Tage hinweg konnte man dort täglich Neuigkeiten rund um das anstehende Release erfahren. Zu ihren Höhepunkten gehören sicherlich die detaillierten Performancevergleiche und die wichtige Neuerungen vorstellenden HD-Videos.

Die neue Version lässt sich wie üblich von der offiziellen Website herunterladen. Ebenso bietet sie Googles AJAX Library an, und zwar komprimiert und unkomprimiert. Einbinden lässt sich das Framework von dort zum Beispiel folgendermaßen:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/
jquery/1.4.0/jquery.min.js"></script>

Selbstverständlich kann man jQuery auf seinem eigenen Server hosten und direkt von dort in seine Seiten einbinden. In der Hinsicht hat sich nichts im Vergleich zur Vorgängerversion verändert.

Geschwindigkeitsvorteile

Im Zusammenhang mit JavaScript-Frameworks bringen Kritiker immer wieder einen Punkt ins Spiel: Durch den Einsatz solcher Frameworks sinkt die Performance der Seite. Gerade auf die Verbesserung der Performance haben die jQuery-Entwickler daher ihr Augenmerk gelenkt, und das Ergebnis weiß zu überzeugen. Vor allem die meistgenutzten Methoden haben sie deutlich weniger komplex gestaltet.

Laut den Core-Entwickler wurden die internen Funktionsaufrufe beliebter jQuery-Methoden teilweise von ursprünglich knapp 30.000 auf circa 500 verringert. Daraus resultieren deutliche Geschwindigkeitsvorteile. Beispielsweise soll die Methode .html() dreimal schneller sein als in jQuery 1.3. Viermal schneller verhalten sich die beiden Methoden .remove() und .empty(). Positiv wirkt sich zudem das Cachen von HTML-Fragmenten aus.

Auf "14 Days of jQuery" finden sich einige Performancetests, über die sich die versprochenen Geschwindigkeitsvorteile anhand standardisierter Tests nachprüfen lässt. Insgesamt stehen vier Testvarianten zur Auswahl:

• Attribute
• Klassen
• DOM-Manipulation
• Leeren/Verschieben

Die Tests basieren auf dem bekannten SlickSpeed-Framework. Zudem weisen die jQuery-Entwickler explizit darauf hin, dass sie ausschließlich solche Selektoren in die Tests einbezogen haben, die in der Praxis relevant sind. Um welche Selektoren es sich handelt, beschreibt John Resig – seines Zeichens "Erfinder" von jQuery – in dem Blogeintrag "Selectors that People Actually Use".

Die bessere Performance wirkt sich auf nahezu alle Teile von jQuery aus. Teils dramatische Verbesserungen gibt es bei den folgenden Methoden:

• .append(), .prepend(), .before() und .after()
• .attr() und .css()
• .addClass(), .removeClass() und .hasClass()
• .html, .remove() und .empty()

Im Vergleich zu den Vorgängerversionen fällt auf, dass vor allem .empty(), .html(), addClass() und removeClass() deutlich schneller sind. Zudem zeigen erste Benchmark Tests, wie schlecht die Performance ist, wenn man DOM-Elemente in einen Container einfügt, in dem Elemente bereits enthalten sind. Schneller ist hingegen das Hinzufügen von Elementen in einen leeren Container. Und noch etwas ist deutlich performanter geworden: Dass das Löschen von Elementen an die Ereignisse gebunden ist.

Interessant sind auch die Geschwindigkeitsunterschiede zwischen den einzelnen Browsern. Wie deutlich sie ausfallen, zeigt Tino Dietel in seinem Blog. Dort werden die teils dramatischen Performanceverluste deutlich, die Benutzer des Internet Explorer 6 in Kauf nehmen müssen, wenn in der jQuery-Anwendung bestimmte Methoden verwendet werden. So dauert der Aufruf von .empty() im IE6 sechsmal länger als in Googles Chrome und 20-mal länger als im Firefox.

Auch wenn die Geschwindigkeitsvorteile im Einzelnen gering erscheinen mögen, gerade bei komplexeren Anwendungen sind sie durchaus mess- und spürbar. (Wenngleich man nicht übersehen darf, dass Performanceeinbußen oftmals andere Ursachen als die hohe Anzahl jQuery-interner Funktionsaufrufe haben.)