marcatori archivi: Cache

Povero uomo di memorizzazione nella cache in JavaScript

1 Risposta

[TL;Versione DR: utilizzare i cookie per memorizzare i risultati delle chiamate asincrone; rendere immediatamente i risultati delle precedenti chiamate asincrone e poi convalidarli dopo il caricamento della pagina.]

Sto lavorando sul sito intranet SharePoint per un cliente che caratterizza, tra le altre cose, una navigazione secondaria stilizzato cui opzioni di menu sono gestiti tramite un elenco personalizzato di vecchio regolare.  L'idea è che il cliente ottiene controllare il menu del "loro" sito senza influenzare o colpiti dalla navigazione globale messa da esso.

(c'è qualcosa di incredibilmente sovversiva sull'aggiunta di un CEWP che punta a un file HTML che carica alcuni CSS e JS per modificare sostanzialmente quasi tutto ciò che riguarda il comportamento di un sito... ma che è per un altro post)

Il codice per questo abbastanza semplice:

Qui il punto dolente è che ogni volta che qualcuno colpisce una delle pagine del sito, browser web dell'utente è protesa per ottenere elementi dall'elenco.  Una volta dev è completa e test ha dimostrato le cose per essere stabile e completa, Questa chiamata è inutile più di 99% del tempo poiché il menu cambia raramente.  Ha anche un effetto strano di UI che è comune in questo mondo nuovo iper-ajaxy siti web – il rendering della pagina e solo allora esegue il rendering dal menu.  È nervosa e fastidioso a mio parere.  E nervosa. Così, memorizzazione nella cache. 

Ho modificato la logica di questa convenzione:

  • Cercare un cookie nel browser che contiene il menu come ultima leggerla
    • Se trovato, rendere immediatamente.  Non aspettare che la pagina completare il caricamento.  (È necessario assicurarsi che il codice HTML è strategicamente collocato qui, ma non è difficile da fare).
  • Attendere la pagina di finire il caricamento e fare un async chiamare per caricare le voci di menu da un elenco utilizzando il resto o lists o qualunque
  • Confrontare quello che ho ottenuto con il cookie
    • Se corrisponde a, FERMATA
    • In caso contrario, usando jQuery, popolare dinamicamente un mazzo se <li>di in un <UL>
  • Utilizzare i CSS per fare la formattazione
  • Profitto!

Alcuni di voi stanno andando a dire, "Ehi! non non c'è nessun reale cache succedendo qui dato che stai leggendo il menu comunque ogni singola volta.”  E hai ragione-non sto dando il server qualsiasi tipo di pausa.  Ma perché la chiamata è async e accade dopo che la pagina iniziale di payload HTML rende pienamente, ci si "sente" più reattivo all'utente.  Il menu rende abbastanza tanto come disegna la pagina.  Se il menu succede al cambiamento, l'utente è soggetto a un ri-disegnare nervosa del menu, ma solo che una volta.

Ci sono alcuni modi per rendere più efficace questa memorizzazione nella cache e il server possono aiutare allo stesso tempo:

  • Mettere in una regola che il "cookie cache" è valida per un minimo di 24 ore o qualche altro lasso di tempo. Finchè non non c'è alcun cookie scaduti, utilizzare snapshot menu del cookie e mai colpito il server.

Beh... questo è tutto quello che mi vengono in mente ora :). 

Se qualcuno ha qualche idea intelligente qui mi piacerebbe conoscerli.

E infine – questa tecnica può essere utilizzata per altre cose.  Pagina su questo client ha un certo numero di cose basate su dati sulle varie pagine, molti di loro modifica relativamente raramente (come una volta a settimana o una volta al mese).  Se destinazione specifiche aree di funzionalità, si può dare un'interfaccia utente più reattiva tirando il contenuto dall'archivio locale cookie e rendendo immediatamente.  Ci si sente più velocemente all'utente anche se non si sta salvando il server qualsiasi cicli.  Si può salvare i cicli server decidendo su alcune condizioni e trigger per invalidare questa cache cookie locale.  Che è tutto situazionale e artsy roba e veramente la più divertente :). 

</fine>

undefinedIscriviti al mio blog.

Seguimi su Twitter a http://www.twitter.com/pagalvin