Tag Archives: Cache-ul

Bietul om pe cache în JavaScript

1 Răspuns

[TL;DR versiune: utilizează module cookie pentru a stoca rezultatele apeluri async; face rezultatele de ultimele apeluri async imediat şi apoi le valida după pagină de încărcare.]

Am fost de lucru pe site-ul SharePoint intranet pentru un client care dispune de, Printre alte lucruri, o navigare secundara stilizate ale căror opţiuni de meniu sunt gestionate prin intermediul o listă particularizată vechi regulate.  Ideea este că clientul ajunge la site-ul "lor" meniu de control fără a afecta sau afectat de navigaţie globală pus de acesta.

(este ceva incredibil subversiv despre adăugarea unui CEWP care indică spre un fişier HTML care încarcă unele CSS şi JS pentru a modifica fundamental aproape totul despre comportamentul unui site... dar asta e pentru un alt post)

Codul pentru acest destul de simplu:

Inflamat la faţa locului aici este că de fiecare dată când cineva loveşte una din paginile site-ului, browser de web care utilizatorul este ajungând pentru a obţine elemente din listă.  Odată ce dev este completă şi testare a dovedit lucruri pentru a fi stabil şi complete, acest apel este necesar mai mult 99% de timp din meniul rareori modificări.  De asemenea, are un efect ciudat UI, care este comună în această lume nouă curajos de hiper-ajaxy site-uri web-pagina face şi abia apoi meniul render.  Este de nervozitate şi distrag atenţia, în opinia mea.  Şi nervozitate. Deci, cache-ul. 

Am modificat logica thusly:

  • Uita-te pentru un cookie în browser-ul care conţine meniul, am citit-o ultima
    • Dacă a întemeia, face imediat.  Nu aşteptaţi pentru ca pagina să termin de încărcare.  (Aveţi nevoie să vă asiguraţi că codul HTML este plasat strategic aici, dar nu este greu pentru a face).
  • Aşteptaţi pentru ca pagina să termin de încărcare şi să facă o asincron apel pentru a încărca până elementele de meniu dintr-o listă utilizând restul sau lists.asmx sau orice altceva
  • Compara ceea ce am primit împotriva cookie
    • Dacă se potriveşte, opreşte-te
    • În caz contrar, folosind jQuery, dinamic popula o grămadă, dacă <li>pe într-o <ul>
  • Utiliza CSS pentru a face toate formatările
  • Profit!

Unii dintre voi sunt de gând să spun, "Hei! nu există nici o reală în cache întâmplă aici deoarece sunteţi de lectură meniul oricum fiecare dată.”  Si ai dreptate-nu sunt oferindu-server nici un fel de pauza.  Dar pentru că apelul este asincron şi se întâmplă după ce pagina iniţială HTML payload face complet, se "simte" mai receptiv la utilizator.  Meniul redă destul de mult ca pagina atrage.  Dacă meniul se intampla la schimbare, utilizatorul este supus la o nervozitate re-trage din meniul, dar numai ca o singură dată.

Există câteva modalităţi de a face acest cache-ul mai eficientă şi de a ajuta server în acelaşi timp:

  • Pune într-o regulă că cache-ul"cookie" este valabil pentru un minim de 24 ore sau unele alt interval de timp. Atâta timp cât nu există nici un cookie-ul expirat, utilizează modulul cookie meniu instantaneu şi niciodată nu a lovit server.

Ei bine... asta e tot ce vin in minte acum :). 

Dacă cineva are vreo idee inteligent aici mi-ar plăcea să le cunoască.

Şi în fine – aceasta tehnica poate fi folosit pentru alte chestii.  Acest client are o serie de lucruri bazate pe date despre diverse pagini, mulţi dintre ei schimbare relativ rar (ca o dată pe săptămână sau o dată pe lună).  Dacă vizaţi domenii specifice de funcţionalitate, puteţi da o mai receptiv UI trăgând conţinut la magazinul local cookie şi redare imediat.  Se simte mai repede utilizatorului, chiar dacă nu salvaţi server orice cicluri.  Tu poate salvaţi în cicluri de server de decide cu privire la unele condiţii şi declanşează pentru a anula acest cache-ul local cookie.  Care este toate situaţionale şi artsy chestii şi într-adevăr cel mai distractiv :). 

</scop>

undefinedAboneaza-te la blog-ul meu.

Urmaţi-mă pe Twitter, la http://www.twitter.com/pagalvin