Tag-Archive: Cache

Armer Mann ist in JavaScript Zwischenspeichern.

1 Antwort

[TL;DR-version: Verwenden Sie Cookies zum Speichern der Ergebnisse der asynchrone Aufrufe; die Ergebnisse der letzten asynchrone Aufrufe sofort gerendert, und überprüfen sie dann nach dem Laden der Seite.]

Ich habe auf SharePoint-Intranet-Site für einen Client, dass die Funktionen gearbeitet, unter anderem, eine stilisierte Sekundärnavigation dessen Menüoptionen über eine normale alte benutzerdefinierte Liste verwaltet werden.  Die Idee besteht darin, dass der Client "ihre" Site-Menü steuern, ohne zu beeinflussen oder durch die globale Navigation löschte dadurch beeinträchtigt wird.

(Es ist etwas unglaublich subversiven zum Hinzufügen eines CEWP, der auf einer HTML-Datei verweist, das lädt einige CSS und JS grundlegend verändern fast alles über eine Website Verhalten... aber das ist für einen anderen Beitrag)

Der Code für diese ziemlich einfach:

Die Wunde Punkt hier ist das jedes Mal, wenn jemand eine der Seiten hits, Web-Browser des Benutzers greift Elemente aus der Liste abgerufen.  Sobald Dev vollständig und Tests sind bewährt Dinge zu stabil und vollständig sein, Dieser Aufruf ist unnötig mehr als 99% die Zeit, da das Menü nur selten ändert.  Es hat auch einen seltsamen UI Affekt, der in dieser schönen neuen Welt von hyper-Ajaxy Websites üblich ist – die Seite macht und erst dann rendert das Menü.  Es ist nervös und störend aus meiner Sicht.  Und nervös. Also, Zwischenspeichern. 

Ich änderte die Logik Wasserverbrauch:

  • Suchen Sie ein Cookie im Browser, der Menü enthält, wie ich es zuletzt gelesen
    • Wenn gefunden, machen Sie es sofort.  Warten Sie nicht auf die Seite geladen.  (Sie müssen sicherstellen, dass Ihre HTML hier strategisch ist, aber es ist nicht schwer zu tun).
  • Warten Sie, bis die Seite fertig geladen und machen ein Async aufrufen, um Menüelemente aus einer Liste mit REST oder lists.asmx oder was auch immer zu laden
  • Vergleichen Sie, was ich mit dem cookie
    • Wenn es passt, STOP
    • Ansonsten, mithilfe von jQuery, ein paar dynamisch zu füllen, wenn <Li>ist in einem <UL>
  • Verwenden Sie CSS, um die Formatierung zu tun
  • Gewinn!

Einige von Ihnen werden sagen, "hey! Es gibt kein richtiger Zwischenspeichern hier da du sowieso das Menü liest jedes Mal.”  Und du hast Recht-ich gebe nicht dem Server jede Art von Bruch.  Aber weil der Aufruf asynchron und geschieht, nachdem die Seite erste ist rendert HTML-Nutzlast voll, es "fühlt"sich stärker auf den Benutzer.  Das Menü macht ziemlich viel wie die Seite zieht.  Wenn das Menü zur Änderung geschieht, der Benutzer wird eine unruhige neu zu ziehen des Menüs unterzogen, aber nur dieses eine Mal.

Es gibt einige Möglichkeiten, um diese Zwischenspeicherung effizienter und helfen den Server zur gleichen Zeit:

  • Setzen Sie in der Regel, dass der "Cookiecache" gültig für einen Mindestaufenthalt von ist 24 Stunden oder einige andere Zeitrahmen. Solange es keine abgelaufene cookie, Verwenden Sie das Cookie Menü Snapshot und nie schlagen Sie den server.

Nun... das ist alles, die was gerade in den Sinn kommen :). 

Wenn jemand hier eine clevere Idee hat würde ich gerne kennenlernen.

Und schließlich – kann diese Technik für andere Sachen verwendet werden.  Dieser Client-Seite hat eine Reihe von datengesteuerten Dingen auf verschiedenen Seiten, viele von ihnen ändern relativ selten (wie einmal pro Woche oder einmal im Monat).  Wenn Sie bestimmte Bereiche der Funktionalität gezielt, Sie können eine reaktionsschnellere Benutzeroberfläche geben, ziehen Inhalte aus dem lokalen Cookie laden und Rendern sofort.  Es fühlt sich schneller an den Benutzer, auch wenn Sie nicht den Server Schleifen speichern.  Sie können sparen Sie die Serverzyklen bei Entscheidung über einige Bedingungen und Auslöser dieser lokalen Cookiecache für ungültig erklären.  Das ist alles situationsabhängig und künstlerisch Zeug und wirklich am meisten Spaß :). 

</Ende>

undefinedOnnieren Sie meinen Blog ab.

Folgen Sie mir auf Twitter bei http://www.twitter.com/pagalvin