Tipps und Tricks zu den Themen: Software- und Webentwicklung

Donnerstag, 19. Juni 2014

JCache - "Performance Addon for JavaScript and jQuery"

JCache ist ein kleines Addon (ca. 1Kb gzipped) und kann Selektor-Anweisungen auf das DOM oder per jQuery um das 1250-fache und mehr beschleunigen. Ermöglicht wird dieser Performance-Gewinn durch eine Zwischenspeicherung der jQuery-Selektoren. Der Zwischenspeicher wirkt auf alle Funktionen, so dass bei Erzeugung eines jQuery-Objektes oder setzen eines Styles zuerst im kompletten Speicher geschaut wird, ob ein entsprechendes Objekt vorhanden ist.

Update 02.08.2014: Die Weiterentwicklung des TurboCache Plugin heißt JCache

Wir haben das alte "Modular Pattern Design" in "Prototype" übertragen und ein paar Optimierungen vorgenommen. Der Code läuft unter Google-V8 jetzt ca. 60 mal schneller als in der alten Version. Damit können Selektor-Queries bis um das 1250-fache beschleunigt werden.





Das Addon ist 100% kompatibel mit allen jQuery-Versionen und kann auch ohne betrieben werden (Stand-alone). Es treten soweit keine Konflikte mit jQuery-Biliotheken auf.

Schnelleinstieg: 1. Installation
Schnelleinstieg: 2. Verwendung

Der TurboCache wird bei einem jQuery-Selektor auf einfachste Weise aktiviert.
Es wird anstelle von $(...) einfach nur ein $ vorangestellt: $$(...)
Anstelle von document.getElementById(...); diese Kurzschreibweise: _ID(...);


Source-Code: "JCache - Performance Plugin for JavaScript and jQuery" v1.2
Download jcache.js (Source)
Download jcache_min.js (Minified) (946 bytes gzipped)


Hinweise zur Verwendung

  • Alle Selektoren, die auf Elemente zeigen, die sich selbst nicht entfernen und neu erzeugen, können zwischengespeichert werden:
    • $$('#id')
    • $$('#wrapper, #menu, #content')
    • $$('#menu').find('a.class')
    • $$('a.class #menu')
  • Achtung: Selektoren die auf Inhalte zeigen, welche im Seitenprozess neu erstellt werden sollen, sollten nicht zwischengespeichert werden. Andernfalls wird die hinterlegte Referenzierung im Falle einer Änderung nicht mitgeändert und zeigt dann auf ein nicht mehr vorhandenes bzw. falsches Element. Eine Serialisierung des Objectes ist aktuell keine Option, da dieser Prozess wesentlich mehr Zeit in an Anspruch nimmt als das Element aus dem DOM neu auszulesen. Optimalerweise wird der Cache für Element eingesetzt, die fortwährend auf der Seite bleiben.
    • z.B. Selektoren die innerhalb eines Containers zeigen, dessen Inhalte dynamisch gesetzt werden
    • dies betrifft auch Elemente mit id-Attribut, sofern diese während der Laufzeit neu generiert werden
    • wir wollen demnächst einen Validator nachrüsten, der die Objekte entsprechend serialisiert
    • als alternative Cache-Verwaltung können die integrierten Hilfsfunktionen verwendet werden (siehe unten)
  • Anstelle von:
    • $$(window)
    • $$(document)
    • $$(document.body)
    sollten unbedingt diese Shortcuts verwenden:
    • $window
    • $document
    • $body
  • Sollte vermieden werden: $$(this)
  • es gibt folgende öffentliche Hilfsfunktionen zum steuern des Cache:
    • VOID removeCache();
    • ARRAY setCache(cache, [selector = all]);
    • ARRAY getCache([selector = all]);
    • BOOLEAN isCached(selector);


Profiler-Test: Leistungs-Vergleich

  1. Standard-Anweisung (DOM): getElementById('id')
  2. TurboCache (DOM): _ID('id')
  3. Standard-Anweisung (jQuery): $('#id')
  4. TurboCache (jQuery): $$('#id')
  5. TurboCache "PreTest": nur für Testzwecke (siehe 11.)
  6. TurboCache "DOM": $(document.getElementById('id'))
  7. Multiple Selektoren (jQuery): $('#id, #id, #id, ...')
  8. TurboCache (jQuery): $$('#id, #id, #id, ...')
  9. Standard-Anweisung (jQuery): $(document)
  10. TurboCache (jQuery): $$(document)
  11. TurboCache "PreTest": $$(document) (siehe 5.)
  12. TurboCache (PreCache): $document


Demnächst: Weitere Performance Features

Es sind weitere Features geplant, die wir an dieser Stelle ergänzen werden.
  • optimierter Selektor-Cache für Klassen und Elementtypen
  • Cache-Gültigkeitsüberprüfung für dynamische Inhalte (Objekt-Serialisierung und -validierung)
  • weitere Optimierungen für $.css() und $.animate()
  • TurboCache als Build-In-Feature


Changelog

  • v1.11 Fix: checks for compatible css attributes and fall back
  • v1.10 NEW: _CSS(selector [, css [, val]]) DOM-optimized CSS
  • v1.04 Fix: removeCache(selector) = null
  • v1.04 Fix: CACHE[selector] = CACHE['$#'+selector] = CACHE['#'+selector] = null
  • v1.03 NEW: $ID(STRING selector | ARRAY selector) ID-optimized query
  • v1.03 Fix: key = '$' + selector + ' ' + context
  • v1.02 NEW: $$(selector [, context]) contextual query
  • v1.02 Fix: setCache(_cache [, index])
  • v1.01 Fix: removeCache(selector) = false



Keine Kommentare:

Kommentar veröffentlichen