[TL;DR version: Använd cookies för att lagra resultaten av async samtal; göra resultaten av tidigare async samtal omedelbart och sedan validera dem efter sidan.]

Jag har jobbat på SharePoint intranät-webbplats för en klient som har, bland annat, en stiliserad sekundär navigering vars menyalternativ hanteras via en vanlig gammal anpassad lista.  Tanken är att klienten får styra "sina" webbplats-menyn utan att påverka eller påverkas av den globala navigeringen som tas ut av det.

(finns det något otroligt omstörtande om att lägga till en CEWP som pekar på en HTML-fil som laddar lite CSS- och JS att i grunden förändra nästan allt om en webbplats beteende... men det är för en annan tjänst)

Koden för denna ganska enkla:

• Vänta på att sidan laddas och göra en asynkrona anrop till ladda upp menyn objekt från en lista med resten eller lists.asmx eller vad
• Med hjälp av jQuery, dynamiskt fylla ett gäng om <Li>är inne i en förälder <UL> (se Christian Pinders artikel här en förenklad förklaring av denna tecnnique)
• Använd CSS för att göra all formatering
• Vinst!

Öm plats här är att varje gång någon träffar en av webbplatsens sidor, användarens webbläsare är att nå ut till få poster i listan.  När dev är komplett och tester har visat att vara stabil och komplett, denna uppmaning är onödigt mer än 99% av tiden eftersom menyn sällan ändras.  Det har också en konstig UI påverka som är vanligt i denna sköna nya värld av hyper-ajaxy webbplatser – sidan återger och först då gör menyn.  Det är skakis och störande i min mening.  Och skakis. Så, cachelagring. 

Jag ändrade logiken thusly:

• Leta efter cookies i webbläsaren som innehåller menyn när jag senast läste det
• Om hittade, göra det omedelbart.  Vänta inte på att sidan laddas.  (Du måste se till att din HTML är strategiskt placerad här, men det är inte svårt att göra).
• Vänta på att sidan laddas och göra en asynkrona anrop till ladda upp menyn objekt från en lista med resten eller lists.asmx eller vad
• Jämför vad jag fick mot cookie
• Om det matchar, Stanna
• Annars, med hjälp av jQuery, dynamiskt fylla ett gäng om <Li>är i en <UL>
• Använd CSS för att göra all formatering
• Vinst!

Några av er kommer att säga, "hey! Det finns ingen riktig caching pågår här eftersom du läser menyn ändå varenda gång.”  Och du har rätt – jag tänker inte ge servern någon form av paus.  Men eftersom samtalet är asynkrona och händer efter sidan inledande HTML-nyttolast gör helt, Det känns"" mer lyhörd för användaren.  Menyn gör ganska mycket som sidan drar.  Om menyn händer till förändring, användaren utsätts för en skakis åter dra på menyn, men bara att en gång.

Det finns några sätt att göra detta caching effektivare och hjälpa till servern samtidigt:

• Sätta i en regel att den "cookie cachen" är giltigt i minst 24 timmar eller några andra tidsram. Så länge det finns ingen utgångna cookie, Använd Kakans menyn ögonblicksbild och aldrig träffa servern.

Tja... det är allt som kommer att tänka på just nu :). 

Om någon har några smarta idéer här skulle jag älska att veta dem.

Och slutligen – denna teknik kan användas för andra saker.  Denna klient sidan har ett antal datadrivna saker på olika sidor, många av dem ändra förhållandevis sällan (som en gång i veckan eller en gång i månaden).  Om du riktar särskilda områden av funktioner, Du kan ge en mer lyhörd UI genom att dra innehåll från lokala cookie butik och rendering omedelbart.  Det känns snabbare att användaren även om du inte sparar servern alla cykler.  Du kan Spara server cykler genom beslut på vissa villkor och utlösare att ogiltigförklara denna lokala cookie cache.  Det är alla situationsanpassat och konstnärliga saker och verkligen den roligaste :). 

</slutet>

Prenumerera på min blogg.

Följ mig på Twitter vid http://www.twitter.com/pagalvin