Tag Archives: Cache

Fattig mann er hurtigbufring i JavaScript

[TL;DR versjon: Bruk informasjonskapsler til å lagre resultatene av asynkrone samtaler; gjengi resultatet av siste asynkrone samtaler umiddelbart og deretter validere dem etter sideinnlastingen.]

Jeg har jobbet på SharePoint intranettområde for en klient som har, blant annet, en stilisert sekundær navigasjon som menyalternativer administreres via en vanlig gamle egendefinert liste.  Tanken er at klienten får Kontrollmenyen "sine" området uten å påvirke eller blir påvirket av global navigasjon satt ut av det.

(Det er noe utrolig samfunnsnedbrytende om å legge til en CEWP som peker til en HTML-fil som laster noen CSS og JS fundamentalt endre nesten alt om nettstedets oppførsel... men det er for en annen post)

Koden for denne pen enkel:

Sår spot her er at hver gang noen treff en av områdets sider, brukerens web-leser er nå for å få elementer fra listen.  Når dev er fullført og testing har vist ting å være stabil og fullføre, Denne samtalen er unødvendig mer enn 99% tiden siden menyen sjelden endres.  Det har også en merkelig UI innvirkning som er vanlig i denne brave new world av hyper-ajaxy nettsteder-siden gjør og deretter gjengir menyen.  Det er nervøs og forstyrrende i min mening.  Og nervøs. Så, hurtigbufring. 

Jeg endret logikken thusly:

  • Se etter en informasjonskapsel i nettleseren som inneholder menyen som jeg sist leste det
    • Hvis funnet, gjøre det umiddelbart.  Ikke vent til siden å slutten lessing.  (Du må kontrollere at HTML er strategisk plassert her, men det er ikke vanskelig å gjøre).
  • Vent til siden å slutten lessing og lage en asynkron behøve laste opp elementer fra en liste med resten eller lists.asmx eller hva
  • Sammenligne hva jeg fikk mot cookie
    • Samsvarer med, stopp
    • Ellers, hjelp jQuery, dynamisk fylle en haug hvis <Li>er i en <UL>
  • Bruk CSS til all formatering
  • Fortjeneste!

Noen av dere skal si, "Hei! Det er ingen reell skjulested vei her siden du leser menyen allikevel hver eneste gang.”  Og du har rett-jeg gi ikke serveren alle slags pause.  Men fordi samtalen er asynkrone og skjer etter siden første HTML nyttelast gjengir fullt, det føles"" mer mottagelig for brukeren.  Menyen gjør ganske mye som siden trekker.  Hvis menyen skjer endringen, brukeren er utsatt for en nervøs re-trekning av menyen, men den ene gangen.

Det er noen måter å gjøre dette hurtigbufring mer effektiv og hjelpe til serveren samtidig:

  • Innlegge en regel at "cookie cache" er gyldig i minst 24 timer eller noen andre tidsramme. Så lenge det er ingen opphøre koke, Bruk informasjonskapselen menyen bilde og aldri truffet serveren.

Vel... det er alt som kommer til hjernen akkurat nå :). 

Hvis noen har noen smarte ideer her ville jeg elske å kjenne dem..

Og til slutt-denne teknikken kan brukes til andre ting.  Denne klienten siden har en rekke data-drevet ting på forskjellige sider, mange av dem endre relativt sjelden (som en gang i uken eller en gang i måneden).  Hvis du målrette bestemte områder av funksjonalitet, Du kan gi en mer responsiv UI ved å trekke innhold fra lokale cookie store og gjengivelse umiddelbart.  Det føles raskere til brukeren selv om du ikke lagrer serveren noen sykluser.  Du kan Lagre server sykluser med å beslutter på noen betingelser og utløsere å oppheve denne lokale cookie cache.  Det er alle situasjonsforståelse og fancy ting og virkelig det morsomste :). 

</slutten>

undefinedAbonner på bloggen min.

Følg meg på Twitter på http://www.twitter.com/pagalvin