2010-01-20 9 views
25

Mi piacerebbe avere immagini, css e javascript nella cache lato client sul browser quando caricano una pagina web. Ci sono così tanti diversi tipi di memorizzazione nella cache che sono confuso su quali utilizzare con asp.net mvc.come memorizzare nella cache css, images e js?

Sarebbe anche possibile che i propri browser controllino la presenza di versioni nuove o modificate di questi file?

Grazie!

risposta

6

I browser si occupano di questo automaticamente, in realtà. Devi fare di tutto per farli NON memorizzare nella cache css, js, html e immagini.

Non ho familiarità con ASP MVC, ma penso che il tipo di memorizzazione nella cache che stai pensando sia la memorizzazione nella cache del codice operativo per il tuo output dinamico creato sul lato server?

+0

Le cose non sono poi così semplici. Il caching è importante se ti interessa un sito privo di bug e ben funzionante. Desiderate evitare che i visitatori debbano ripetere il download dei contenuti, ma volete anche evitare che i visitatori abbiano contenuti scaduti. In ASP.NET MVC utilizzo un approccio che include un hash MD5 nell'URL che consente di ottenere ciò senza pensarci troppo dopo la sua configurazione. Controlla [la mia risposta qui] (http://stackoverflow.com/questions/936626/how-can-i-force-a-hard-refresh-ctrlf5/6439351#6439351) per il codice sorgente. –

+0

@Drew Certo, questo non era destinato ad essere una panoramica del caching. Basta dire al richiedente che se non hai bisogno di un controllo più dettagliato, le impostazioni predefinite esistenti nei browser e nei server non sono così male. Apache è solitamente configurato per servire ETag, ecc. E i browser di solito vanno avanti con 304s. Hai controllato la tua soluzione, e questa è una buona idea! Probabilmente userò questa idea presto a Django. – JAL

-2

Il caching del lato client viene gestito automaticamente dai browser quando si properly setCache-Control headers e si imposta web.config. Così:

<system.webServer> 
    <staticContent> 
     <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="00.00:10:00" /> 
    </staticContent> 
</system.webServer> 
+3

Non è così semplice. È necessario fornire le intestazioni appropriate nella risposta HTTP. Inoltre, devi dire ai browser di invalidare la cache in qualche modo quando il tuo contenuto cambia, altrimenti il ​​sito fallisce fino a quando non fa un duro aggiornamento. –

43

È necessario impostare le intestazioni di controllo della cache sul server. È possibile farlo da attaccare questo nel vostro web.config:

<system.webServer> 
    <staticContent> 
    <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="30.00:00:00" /> 
    </staticContent> 
</system.webServer> 

questo sarebbe dire al browser oggi per controllare anche per i nuovi contenuti su qualsiasi cosa statico per 30 giorni.

Per la seconda domanda, fornire un meccanismo per aggiungere una querystring al contenuto. Nel mio attuale progetto comprimiamo e combiniamo javascript e css come parte della build. Quando mettere i link nella pagina è assomiglia:

<script src="/Resources/Javascript/Combined.js?v=2.2.0.1901" type="text/javascript"></script> 

querystring è il numero Major.Minor.0.Changeset e le modifiche in qualsiasi momento abbiamo spingere un accumulo, causando il client di ri-prenderlo. La stessa identica cosa accade sui fogli di stile nel loro elemento <link>.

+0

Questo clientcache memorizzerebbe anche l'html nella cache? Vorrei velocizzare le aree del mio account che fanno un uso pesante di ajax memorizzando nella cache solo script, css e immagini (non l'html). Cosa consiglieresti per questo? – chobo

+0

@chobo: questo influenzerebbe solo il contenuto statico ... questa è una direzione di IIS 7 su come gestire le cose che ASP.Net non ha (immagini, css, js). Qualsiasi cosa dinamica come un aspx fa ** NOT ** ottiene questa intestazione e non verrebbe memorizzata nella cache. –

+0

L'utilizzo di stringhe di query per le versioni indica che alcuni server proxy non memorizzeranno il file nella cache. Meglio inserirla direttamente nell'URL. E se lo farai, usa un hash MD5 del contenuto del file e scambia il concetto di versioning per il concetto di identità. Ho qualche [codice sorgente qui] (http://stackoverflow.com/questions/936626/how-can-i-force-a-hard-refresh-ctrlf5/6439351#6439351) che mostra come lo faccio al momento . Gradirei pensieri e feedback. –

4

@Paul Creasey e @Salsa sono entrambi corretti che i browser gestiranno il caching di default fintanto che il collegamento è lo stesso.

Come già accennato, questo solleva un problema quando è necessario aggiornare quei file poiché non si ha alcuna garanzia che il browser del client verificherà la presenza di una versione aggiornata. In molti casi lo fanno solo dopo che è trascorso un determinato periodo di tempo, il che può creare un'esperienza utente scadente.

Ci sono un certo numero di domande già fatte su questo sito su come gestire l'avviso dei browser client su refresh the cache. In breve, tutti si basano sulla modifica del collegamento quando si modifica il contenuto del file.

È possibile aggiungere un parametro per l'URL che verrà utilizzato solo per scopi di cache, quali:

<script src="/myJavascript.js?version=4"></script> 

Poi basta cambiare il numero di versione quando si modifica il contenuto e la necessità di forzare un aggiornamento lato client ala this answer.

0

Questo è fatto meglio in IIS o nel tuo file di configurazione - assicurati che le tue immagini CSS/JS/siano impostate per non scadere mai.

Quando si fa riferimento al codice, suggerisco di aggiungere una versione o una data di compilazione al nome file, ad es. script.js?20100120, in modo che quando si arriva a cambiarli, è sufficiente modificare la versione per forzare un aggiornamento da tutti i browser che lo hanno memorizzato nella cache.

1

Date un'occhiata al answer I posted here di una soluzione che massimizza il vantaggio di utilizzare la cache, ed evita eventuali problemi con gli utenti che hanno bisogno di 'duro' refresh (Ctrl +F5).

Utilizza un hash MD5 del contenuto stesso nell'URL, in modo che l'URL rimanga lo stesso purché il file sia lo stesso, che è davvero l'obiettivo. Il calcolo dell'hash è super veloce e viene memorizzato nella cache sul server in modo che il rendering della pagina non sia notevolmente rallentato. Il tutto è misurato in microsecondi, e i benefici sono stati (su my site for scuba divers) fantastici finora. Lo applico a tutte le immagini, CSS e JS con l'eccezione delle immagini dai file CSS poiché non sono ancora generate dal server sul mio sito (ancora)

Problemi correlati