Anzeige
Anzeige
UX & Design

Basket.js: Bessere Performance beim Caching mit „Web Storage“

Basket.js nutzt localStorage zum Cachen von Skripten. Wir verraten dir, welche Vorteile das hat und wie du Basket.js nutzen kannst.

Von Ilja Zaglov
3 Min.
Artikel merken
Anzeige
Anzeige
Basket.js Logo. (Grafik: Basket.js)

Basket.js macht sich ein Phänomen zunutze, das bei Tests von Google und Bing aufgetreten ist. Diese Tests haben gezeigt, dass der Aufruf von Skripten aus dem „Web Storage“ im Vergleich zum Cache des Browsers insbesondere bei mobilen Geräten zu einer deutlich besseren Performance führt. In diesem Artikel benutzen wir den gängigen Begriff „localStorage“, obwohl es sich eigentlich um den in HTML5 spezifizierten „Web Storage“ handelt.

Anzeige
Anzeige

Basket.js will die Vorteile dieser Technologie für jeden zugänglich machen und bietet daher eine Bibliothek an.

Was ist „localStorage“?

Der in HTML5 spezifizierte „Web Storage“, auch „DOM Storage“ oder eben „localStorage“ genannte Speicher, ist eine einfache API innerhalb moderner Browser, die Entwicklern die Möglichkeit gibt, Daten innerhalb des Browsers abzulegen. Die Spezifikation von HTML5 legt hierfür ein Limit von fünf Megabyte fest.

Anzeige
Anzeige

Die Browserhersteller bieten aber auch größere Speichermengen für diese API an. Allerdings muss hierfür über einen Browser-Dialog vorher eine Erlaubnis vom Benutzer eingeholt werden.

Anzeige
Anzeige

Die API von Basket.js

Mit Basket.js kannst du Skripte im „localStorage“ deines Browsers ablegen, um sie von dort später schneller wieder aufrufen zu können, als über den Browser-Cache. Hierfür bietet dir Basket.js folgenden Methoden-Pool zum Speichern, Aufrufen und Verwalten der Skripte in „localStorage“ an:

  • basket.require();
  • basket.get();
  • basket.remove();
  • basket.clear();

Basket.js: require()-Methode

Mit basket.require(details) kannst du ein oder mehrere Skripte laden und im „localStorage“ hinterlegen. Hierfür erwartet die Methode ein Objekt oder ein Array von Objekten mit den Eigenschaften des Skriptes.

Anzeige
Anzeige

Die Methode basket.require() lädt asynchron alle benötigten Skripte und stellt sie für die weitere Arbeit zur Verfügung. Mit dem folgenden Beispiel lädst du ein, beziehungsweise mehrere Skripte in den „localStorage“ des Browsers:


basket.require({ url: 'jquery.js' });
basket.require(
{ url: 'jquery.js' },
{ url: 'underscore.js' },
{ url: 'backbone.js' }
);

Bei Bedarf können auch Abhängigkeiten – also „Dependencies“ – festgelegt werden und nachträglich hinzugeladen werden. So resultiert der folgende Aufruf darin, dass zunächst die jQuery-Bibliothek geladen wird und im Anschluss die davon abhängige jQuery-UI-Bibliothek.

basket.require({ url: 'jquery.js' })
.then(function () {
basket.require({ url: 'jquery-ui.js' });
});

Du kannst Skripte auch zur späteren Verwendung zwischenspeichern, ohne sie auszuführen, in dem du die Eigenschaft execute der require()-Methode auf false setzt.

Anzeige
Anzeige
basket.require({ url: 'jquery.min.js', execute: false });

Für die einzelnen Skripte können, der Einfachheit halber, mit der key-Eigenschaft Aliase vergeben werden, sodass eine einfachere Ansprache innerhalb des Codes möglich wird.

basket.require({ url: 'jquery-2.0.0.min.js', key: 'jquery' });

Mit der expire-Eigenschaft kann die Speicherzeit in Stunden für das jeweilige Skript angegeben werden.

basket.require({ url: 'jquery.min.js', expire: 2 });

Sollte der Cache überschrieben, also ein so genanntes „Decaching“ betrieben werden müssen, steht die unique-Eigenschaft zur Verfügung, die als Indentifikationsnummer fungiert und auch noch nicht abgelaufene Ressourcen überschreiben kann.

Anzeige
Anzeige
// fetch and cache the file
basket.require({ url: 'jquery.min.js' });
// fetch and cache again
basket.require({ url: 'jquery.min.js', unique: 123 });

Basket.js: get()-Methode

Mit der basket.get()-Methode wird mit Hilfe des „Keys“, den du in der basket.require()-Methode definiert hast, versucht, eine gecachte Ressource aus dem „localStorage“ zu laden. Zudem liefert sie dir neben dem Skript selbst zusätzliche Informationen wie den Speicherzeitpunkt und den Ablaufzeitpunkt des Skriptes zurück.

var req, ttl;
basket.require({ url: 'jquery.min.js', key: 'jquery' });
req = basket.get('jquery');
// know the lifetime
ttl = req.expire - req.stamp;

Basket.js remove()-Methode

Mit der basket.remove()-Methode kannst du ein gespeichertes Skript aus dem Cache entfernen.

basket.remove('jquery.js');
basket.remove('modernizr');

Basket.js clear()-Methode

Die basket.clear()-Methode hat eine ähnliche Funktionsweise, sie löscht alle gespeicherten Skripte aus dem Cache. Sollte die expired-Eigenschaft auf true gesetzt werden, beschränkt sich das Skript jedoch nur auf die abgelaufenen Ressourcen.

Anzeige
Anzeige

Simpler „Loader“ für den Performance-Boost

Das Team hinter basket.js arbeitet stetig daran, das Skript zu verbessern und mit zusätzlichen Funktionen zu erweitern.

Fazit

Das Speichern von Daten im „localStorage“ ist eine großartige Sache, besonders solange es im Vergleich zum herkömmlichen Cache und alternativen Methoden – wie der Speicherung mit IndexedDB – im Vorteil ist.

In unserem Test mit einer simulierten EDGE-Verbindung und der Übertragung der Bibliotheken „jQuery“ und „jQuery UI“ konnten wir beachtliche Verbesserungen erzielen. In der ersten Abbildung siehst du jeweils den ersten und zweiten Aufruf der Webseite mit aktiviertem Cachhing. Die zweite Abbildung zeigt das gleiche mit Basket.js im Einsatz.

Anzeige
Anzeige
Ladevorgang ohne asynchronem JavaScript Loading und mit Cache

Ladevorgang ohne asynchronem JavaScript Loading und mit Cache. (Screenshot: t3n)

Local Storage Performance mit Basket.js

Local Storage Performance mit Basket.js. (Screenshot: t3n)

Hier werden der Vorteil des asynchronen Ladens der Skripte und die schnellere Ladezeit von Basket.js im Vergleich zum normalen Caching deutlich. Derzeit sieht sich das Projekt als „Proof-Of-Concept“. Auf der Projektseite von basket.js findest du alle Informationen zum Skript und kannst selbst ausprobieren, ob die Performance-Steigerung, die das Tool erzielt, die Mühe wert ist.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Kommentare (7)

Community-Richtlinien

Marcus Woy

Wie sieht es mit der Kompatibilität mit unseren besten Freuden IE7 (*hust*, *hust* 6….) aus?

sascha fuchs

Wie soll es schon mit IE aussehen? Der kann das nicht, bekommt sein Fallback, läuft nicht so schnell aber die Oldies haben es auch nicht anders verdient.

axroth

Wow, muss ich gleich mal testen.

heinz

IE7, ja is klar.
An die Leute die sich darum gedanken machen: Ihr tut mir leid ;P

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Kommentar abgeben

Melde dich an, um Kommentare schreiben und mit anderen Leser:innen und unseren Autor:innen diskutieren zu können.

Anmelden und kommentieren

Du hast noch keinen t3n-Account? Hier registrieren

Anzeige
Anzeige