jQuery Performance Check

jQuery Performance Test in Google Chrome jQuery ist eines der beliebtesten Javascript-Frameworks. Viele Internetauftritte und -anwendungen basieren mitlerweile fast vollständig darauf. jQuery vereinfacht dem Webdesigner das entwickeln von Browser-übergreifenden Javascript-Code. Allerdings machen sich diese Vorteile bei der Performance bemerkbar.

Test Tool

Wir haben jQuery unter die Lupe genommen. Der Test schneidet bei verschiedenen Browser-Versionen unterschiedlich schnell ab. Sie können eine jQuery-Version wählen oder selbst einen Link einfügen.

jQuery Logo

Fazit

Wir empfehlen jQuery-Anweisungen nur dort zu platzieren, wo es sinnvoll ist. Oft vergessen die Entwickler, wieviel Javascript hinter der jQuery Bibliothek steckt, die bereits schon bei einem einfachen Selektor-Aufruf ausgeführt wird, obwohl es nicht unbedingt nötig wäre. Dazu kommt, dass ein falscher Einsatz (siehe Test oben: Selektoren), Ihren Javascript-Code mehr als 350-fach verlangsamen kann. Versuchen Sie soviel wie möglich "zu Fuss" zu erledigen, dann minimieren Sie potentielle Performance-Schwächen in Ihrem Code.

jQuery Performance Tipps

  • Legen Sie alle statischen jQuery-Funktionsrückgaben in einem Cache ab, eine einfache Möglichkeit ist: var cacheObj = cacheObj || $(...); so wird cacheObj nur einmal initialisiert
  • DOM-Elemente können später aus ziwschengepseicherte jQuery-Objekte extrahiert werden (für direkte Manipulation): cacheObj[0].style.attr = '';
  • hauseigenes document.getElementByID(...) immer dem jQuery-Selektor $('...') bevorzugen, ist bis zu 50 mal schneller!
  • dasselbe gilt für document.getElementsByTagName(...), hier deutlich bis zu 500 mal schneller!
  • schreiben Sie eine unterstützende Funktion 'getElementsByClassName' (ist leider erst seit HTML5 Standard) die direkt auf das DOM zuggreift und Context-basiert arbeitet, ist auch hier deutlich bis zu 100 mal schneller!
  • versuchen Sie banale jQuery-Anweisungen in reines Javascript ohne $-Objekt umzuwandeln
  • falls ein jQuery-Objekt erforderlich ist, dann casten: $(document.getElementByID(...)) oder $(document.getElementsByTagName(...)), ist bis zu 10mal schneller!
  • bei mehrfacher Selektor-Anweisungen wie $('#id1, #id2') durch ein Array ersetzen: $([document.getElementByID('id1'), document.getElementByID('id2')])
  • bei mehrfachen Selektor-Tags wie $('div, span') so lösen: $(document.getElementsByTagName('div').concat(document.getElementsByTagName('span')))
  • find()-Methode ist der schnellste jQuery-Selektor, bsp: $('#id').find('.class'), besser gegenüber Kontext als 2. Parameter: $('.class', 'id')
  • jQuery-Selektoren mischen: $(document.getElementByID('id')).find('.class'), ist schneller
  • direktes setzen von Styles: element.style.atrr = '...' dem jQuery $(...).css(...) vorziehen
  • noch besser ist anstelle von einem Style eine Klasse zuzuorden mit element.className = '...', das ist die schnellste Variante CSS zu manipulieren
  • Each-Loop innerhalb eines jQuery-Arrays ist sehr schnell