Tag Archives: Cache

Arme Man de Caching in JavaScript

1 Antwoord

[TL;DR versie: gebruik van cookies voor het opslaan van de resultaten van asynchrone oproepen; de resultaten van afgelopen async oproepen onmiddellijk renderen en vervolgens valideren ze na het laden van de pagina.]

Ik heb gewerkt op SharePoint intranet-site voor een client die functies, onder andere, een gestileerde secundaire navigatie waarvan menu-opties worden beheerd via een regelmatige oude aangepaste lijst.  Het idee is dat de client krijgt om "hun" site systeemmenu zonder te tasten of wordt beïnvloed door de wereldwijde navigatie stak door het.

(Er is iets ongelooflijk subversieve over het toevoegen van een CEWP die verwijst naar een HTML-bestand dat ladingen sommige CSS en JS fundamenteel veranderen bijna alles over van een site probleem... maar dat is voor een andere post)

De code voor dit vrij eenvoudig:

De zere plek hier is dat elke keer als iemand hits een pagina van de site, webbrowser van die gebruiker is het bereiken uit om items uit de lijst.  Zodra dev voltooid is en dingen te testen heeft bewezen stabiel en voltooien, deze oproep is onnodig meer dan 99% van de tijd sinds het menu zelden verandert.  Heeft ook een raar UI invloed die gebruikelijk is in deze heerlijke nieuwe wereld van hyper-ajaxy websites-de pagina maakt en alleen dan heeft het menu maken.  Het is zenuwachtig en afleidend in mijn mening.  En zenuwachtig. Dus, opslaan in de cache. 

Ik heb gewijzigd de logica thusly:

  • Zoek naar een cookie in de browser die het menu bevat als ik laatst lezen
    • Als gevonden, maken het onmiddellijk.  Wacht niet op de pagina te laden voltooien.  (U moet ervoor zorgen dat uw HTML-code wordt strategisch geplaatst hier, maar het is niet moeilijk om te doen).
  • Wachten op de pagina te laden voltooien en maak een async oproepen voor vracht opwaarts menu-items uit een lijst met behulp van REST of lists.asmx of wat dan ook
  • Vergelijken wat ik heb tegen de cookie
    • Als het overeenkomt met, STOP
    • Anders, met behulp van jQuery, dynamisch vullen een bos als <Li>de in een <UL>
  • Gebruik CSS te doen alle opmaak
  • Winst!

Sommigen van u zullen zeggen, "hey! Er is geen echte in het voorgeheugen onderbrengende gaat hier omdat je het lezen van het menu hoe dan ook elke keer.”  En je hebt gelijk-ik ben niet het geven van de server elke soort pauze.  Maar omdat de oproep async is en gebeurt na de pagina's eerste HTML-nettolading volledig maakt, het voelt"" ontvankelijker voor de gebruiker.  Het menu maakt vrij veel als de pagina vestigt.  Als het menu aan de verandering gebeurt, de gebruiker is onderworpen aan een zenuwachtig opnieuw te tekenen van het menu, maar slechts die één keer.

Er zijn een aantal manieren aan deze cache doeltreffender maken en helpen de server op hetzelfde moment:

  • Zet in een regel dat de cache"cookie" geldig voor een minimum van is 24 uren of sommige andere tijdsbestek. Zolang er geen verlopen cookie is, gebruik van de cookie menu momentopname en nooit hit de server.

Nou... dat is alles wat die te binnen schieten nu :). 

Als iemand slimme ideeën hier heeft zou ik graag willen weten ze.

En tot slot – deze techniek kan worden gebruikt voor andere dingen.  Deze client pagina heeft een aantal data-gedreven dingen op verschillende pagina 's, velen van hen veranderen relatief zelden (zoals een keer per week of eenmaal per maand).  Als u zich richten op specifieke gebieden van functionaliteit, u kunt een meer responsieve UI geven door trekken inhoud uit de lokale cookie store en meteen renderen.  Het voelt sneller aan de gebruiker, zelfs als u niet de server elke cycli opslaat.  U kan Sla de server cycli door te besluiten op een aantal voorwaarden en triggers om deze lokale cookie cache ongeldig te maken.  Dat is allemaal situationele en kunstzinnige spullen en echt de leukste :). 

</einde>

undefinedAbonneren op mijn blog.

Volg mij op Twitter op http://www.twitter.com/pagalvin