6 leichtgewichtige jQuery-Alternativen im Vergleich
Die Javascript Library jQuery ist mit der Zeit ordentlich gewachsen und bringt selbst als .min.js inzwischen fast 100 KB auf die Waage. Dabei werden viele der Funktionen von jQuery häufig gar nicht benutzt. Neben der Download-Größe ist auch die Rendering Zeit nicht zu verachten, die größere Dateien mit sich bringen, und ältere Smartphones schnell mal lahmlegen können. Daher kann es daher nicht schaden, sich nach schlankeren Alternativen umzusehen. Die Grundfunktionen, die jQuery ausmachen, sollten aber natürlich weiterhin verfügbar sein.
Ich habe hier mal einige der am Häufigsten genannten jQuery-Alternativen verglichen. Die Auswahl der Features, die verglichen wurden, ist rein subjektiv und basiert auf den Funktionen, die persönlich häufiger nutze. Für die Größenangabe der GZIP-Kompression wurde die höchste Kompressionsrate (gzip -9) angewendet. Die tatsächliche Größe im Browser kann daher abweichen. Die angegeben Funktionen entsprechen den original Funktionen wie sie in jQuery bezeichnet werden und heißen bei einigen der Libraries anders.
Funktionsvergleich
| jQuery 1.12.0 | jQuery 2.2.0 | Zepto 1.1.6 | Sprint.js | Minified.js 1.1 (Web) | Cash 1.0.0 | Umbrella JS 1.1.3 | ki.js | |
|---|---|---|---|---|---|---|---|---|
| Größe (Minified) | 97 KB | 86 KB | 25 KB | 17 KB | 10 KB | 8 KB | 5 KB | 602 Byte |
| Größe (GZIP) | 34 KB | 30 KB | 9 KB | 5 KB | 4 KB | 3 KB | 2 KB | 404 Byte |
| Ready-Function | Ja | Ja | Ja | Ja | Ja | Ja | Nein | Ja |
| each() (Array) | Ja | Ja | Ja | Ja | Ja | Ja | Nein | Nein |
| Ajax | Ja | Ja | Ja | Nein | Ja | Nein | Ja | Nein |
| ID-Selector | Ja | Ja | Ja | Ja | Ja | Ja | Ja | Ja |
| Class-Selector | Ja | Ja | Ja | Ja | Ja | Ja | Ja | Ja |
| .on()-Events | Ja | Ja | Ja | Ja | Ja | Ja | Ja | Ja |
| hide()/show() | Ja | Ja | Ja | Nein | Ja | Nein | Nein | Nein |
| append()/html() | Ja | Ja | Ja | Ja | Ja | Ja | Ja | Nein |
Dateigrößen Vergleich
Hier ist nochmal ein Diagramm, das die Dateigrößen der verschiedenen Libraries darstellt. Beachtlich ist hier ki.js, das weniger als 1 KB groß und damit über 100 Mal kleiner als jQuery ist:
Enthaltsamkeit
Bei Webseiten, die nur wenig Javascript einsetzen, kann es sich sogar lohnen komplett auf jQuery und Co. zu verzichten und wieder die guten alten nativen Funktionen zu benutzen. Hierfür bietet sich die Seite youmightnotneedjquery.com an, die für viele der jQuery-Funktionen die passenden nativen Funktionen anzeigt.
Kommentare
Echt gute Übersicht. Es wäre schön, wenn es hier eine neuere Version geben würde, da die Seite echt gut bei Google rankt