[TL;DR version: Brug cookies til at gemme resultaterne af async opkald; gengive resultaterne af tidligere async opkald straks og derefter validere dem efter side-belastning.]
Jeg har arbejdet på SharePoint intranet site for en klient at funktioner, blandt andet, en stiliseret sekundær navigation hvis menuindstillinger styres via en almindelig gamle brugerdefineret liste. Ideen er at klienten får lov til at kontrollere menuen "deres" websted uden at påvirke eller påvirkes af den globale navigation sat ud af det.
(der er noget utrolig undergravende om tilføjelse af en CEWP, der peger på en HTML-fil for at indlæse nogle CSS og JS fundamentalt ændre næsten alt om et websteds opførsel... men det er for en anden post)
Koden for denne smukke enkle:
- Vente på siden for at afslutte lastning og gøre en asynkron hidkalde hen til ladning oppe menu artikler på en liste ved hjælp af resten eller lists.asmx eller hvad
- Ved hjælp af jQuery, dynamisk udfylde en bunke, hvis <Li>er inde i en overordnet <UL> (Se Christian Pinder artiklen her for en forenklet forklaring på denne tecnnique)
- Brug CSS til at gøre al formatering
- Profit!
Den sore spot her er, at hver gang nogen hits en af webstedets sider, brugerens webbrowser er at nå ud til at få elementer på listen. Når dev er komplet og test har bevist ting at være stabil og komplet, denne indkaldelse er unødvendige mere end 99% tid siden menuen sjældent ændres. Det har også en underlig UI indflydelse, som er almindeligt i denne fagre nye verden af hyper-ajaxy websteder – siden renders og først derefter gør menuen. Det er nervøs og distraherende efter min mening. Og nervøs. Så, cachelagring.
Jeg har ændret logikken thusly:
- Kigge efter en cookie i den browser, der indeholder menuen, som jeg sidst læste det
- Hvis fundet, gøre det straks. Vent ikke til siden for at afslutte læsning. (Du skal sørge for din HTML er strategisk placeret her, men det er ikke svært at gøre).
- Vente på siden for at afslutte lastning og gøre en asynkron hidkalde hen til ladning oppe menu artikler på en liste ved hjælp af resten eller lists.asmx eller hvad
- Undersøg hvad jeg fik mod cookie
- Hvis det passer, Stop
- Ellers, ved hjælp af jQuery, dynamisk udfylde en bunke, hvis <Li>er i en <UL>
- Brug CSS til at gøre al formatering
- Profit!
Nogle af jer vil sige, "hey! der er ingen reel caching vej på her, da du læser menuen alligevel hver eneste gang.” Og du har ret-jeg vil ikke give serveren nogen form for pause. Men fordi opkaldet er asynkrone og sker efter siden 's oprindelige HTML nyttelast gengiver fuldt, det føles"" mere lydhøre over for brugeren. Menuen gør temmelig meget som siden trækker. Hvis menuen sker til ændringen, brugeren er udsat for en nervøs re-drage i menuen, men kun denne ene gang.
Der er nogle måder at gøre dette caching mere effektivt og hjælpe serveren på samme tid:
- Sat i en regel at "cookie-cache" er gyldig i mindst 24 timer eller nogle andre tidsramme. Så længe der er ingen udløbet cookie, bruge den cookie menuen øjebliksbillede og aldrig ramte serveren.
Tja... det er alt, der kommer til at tænke lige nu :).
Hvis nogen har nogen kloge tanker her ville jeg elske at kende dem.
Og endelig – denne teknik kan bruges til andre ting. Denne klient side har en række datastyrede ting på forskellige sider, mange af dem ændre relativt sjældent (ligesom en gang om ugen eller en gang om måneden). Hvis du er målrettet mod specifikke områder af funktionalitet, Du kan give en mere lydhør UI ved at trække indholdet fra den lokale cookie butik og rendering straks. Det føles hurtigere til brugeren selv hvis du ikke gemmer serveren enhver cyklusser. Du kan Gem serveren cyklusser ved at beslutte på visse betingelser og udløsere til at afkræfte denne lokale cookie cache. Det er alle situationsbestemt og kunstnerkvarteret ting og virkelig den mest sjov :).
</slutningen>
Følg mig på kvidre på http://www.twitter.com/pagalvin