jQuery Benchmarks mit Vergleichen


Im Kurs werden immer mal wieder von enthusiastischen Teilnehmern Hinweise zum Laufzeitverhalten und zur Optimierung der jQuery-Benutzung angefragt. Ich habe hier ein paar Hinweise zusammengestellt...


jQuery versus native Javascript/DOM


Die älteren Bestandteile von jQuery werden durch die Weiterentwicklung der Standards für HTML/CSS und DOM zunehmend durch native Javascript-Funktionalitäten ersetzt und damit obsolet.

Bibliotheken wie jQuery haben sich vor allem zwei Aspekte auf die Fahnen geschrieben:
  1. Cross-Browser-Kompatibilität
  2. Bereitstellung von im Alltag gewünschten Funktionen, die in aktuell durchgesetzten Standards noch nicht enthalten sind
Beide Aspekte erledigen sich von Natur aus mit der Zeit.
Was übrig bleibt, ist der Umstand,...
Viele Funktionen, die ursprüngliches Anliegen von jQuery waren, sind inzwischen cross-browser-kompatibel durch native Javascript-Funktionen im DOM (document.evaluate() und element.querySelector()) und/oder durch CSS (Version 2 und 3) bereitgestellt worden. Man BENÖTIGT jQuery heutzutage weder für den Zugriff auf DOM-Elemente via CSS-Selektoren (der ursprüngliche Quell für den Namen der Bibliothek) noch für eine ganze Palette von optischen Spielereien - was letztlich genau das ist, wofür die Masse der Website-Amateure diese Bibliothek einsetzen (die TATSÄCHLICH NÜTZLICHEN Anwendungen halten sich arg in Grenzen, gelle?!).

Andere Bibliotheken, die ähnliche Anliegen wie jQuery hatten, sind inzwischen entweder in der Versenkung verschwunden oder führen heutzutage zum genauen Gegenteil dessen, wozu sie einst erfunden wurden: Statt Cross-Browser-Kompatibilität herzustellen führen sie dazu, daß Websites nur noch mit einzelne Browsertypen bzw. mit veralteten Modellen nutzbar sind. Ein krasses Beispiel für diesen Effekt ist die Seite www.equilino.de (ein familienfreundliches Browserspiel um Pferde), die u.a. von t-online aktiv und massiv promoted wird, aber nichtsdestotrotz nur noch mit Browsern aus dem letzten Jahrtausend benutzbar ist oder aber mit aktuellem Firefox und nichts anderem, was ein bereits jahrelang währender Zustand ist, der also offenbar vom dortigen Programmiererteam nicht mehr mit zumutbarem Aufwand abzustellen ist.

Seien Sie also gewarnt: Lassen Sie bei der Entscheidung, Javascript-Bibliotheken zu benutzen, eine gesunde Portion Weitsicht walten: Sie erkaufen schnell erhältliche Gimmicks (die zwar GEIL sind, ja, aber in den seltendsten Fällen notwendig) für den Preis eventueller späterer Inkompatibilität, falls die Bibliothek nicht im Mainstream liegt und aktiv weiterentwickelt wird! So daß Sie Ihre Seitenbesucher zwar für den Moment mit Spielereien anziehen, aber schon wenige Jahre später unter Umständen verschrecken! Überlegen Sie, was Ihnen wichtiger ist!

Benchmarks und Vergleiche


So, jetzt zum eigentlichen Anliegen: Eigentlich wollte ich hier allmählich Benchmarks zusammentragen, die immer wieder mal im Lehrgang von dem einen oder anderen Teilnehmer hineingetragen oder angefragt werden. Da ich den Lehrgang bisher immer nur in Vertretung gegeben habe, hat sich das aber noch nicht sehr weit entwickelt.

Es gibt aber inzwischen eine recht hübsche Seite mit einer Art Wiki für Javascript-Benchmarks, die von Gegenüberstellungen von nativen Javascript- und jQuery-Funktionen untereinander und einander gegenüber nur so wimmelt: der "JavaScript performance playground". (Siehe dort auch: populäre Tests)

Ich rate dringend jedem, der sich über Leistungsoptimierung einen Kopf machen möchte, dort einen Blick reinzuwerfen. Sie können dort auch sehr einfach einen eigenen Test einstellen und bekommen auf jener Seite dazu eine Testschleife mit statistischer Auswertung gratis in die Hand gedrückt. Sehr komfortabel gamacht.

Bevor Sie sich dort aber in Details oder der Betrachtung belangloser Prozentpunkte verlieren, seien die allerwichtigsten trivialen Fehler abgemahnt, die auch hier im Kurs mit penetranter Regelmäßigkeit auffallen:
Es sei hier auch gleich Vorsicht angeraten: Wenn die Tests im "JavaScript performance playground" nicht redaktionell überwacht werden, können böse und/oder dumme Buben natürlich alles mögliche dort einstellen. Gucken Sie also gerade bei jungen Tests erstmal den Code an, bevor Sie ihn ausführen!
Einige der Tests sind fehlerhaft. Die kann man aber recht trivial durch Kopieren der Seite und lokales Editieren ausbessern, wenn man an einem bestimmten Test gerade auf Teufel-komm-raus interessiert ist.

Einzelne solche fehlerhaften Tests habe ich hier mal korrigiert hingestellt: (Bitte beachten: Es sind aus dem Browser heraus unter DESSEN Manipulation gespeicherte HTML-Seiten, bei denen logischerweise die meisten Links hier auf meinem Server nicht funktionieren können. Lassen Sie einfach das sinnlose Herumklicken in der Seite sein, OK?! Der Test als solcher läuft durch.)

Weiterführendes


Weitere Tips finden Sie im Internet in zahlreichen Blogs, Foren und anderen Seiten. Die sind allerdings schon wieder dermaßen zahlreich, daß man die Wälder vor lauter Bäumen nicht sieht.
Eine hübsche Anregung zu aktuellen (!) Problemen finden Sie zum Beispiel in extra aus gewissen Anlässen - wie zum Beispiel der Weihnachtszeit - zusammengestellten Seiten - wie zum Beispiel in sogenannten Adventskalendern für Programmierer. Hier eine Anregung aus den News des Heise-Verlages: