Guida aggressiva, JavaScript cache

Question

Ho incorrere in un problema in cui mi apportare modifiche ad alcuni file JavaScript che fa riferimento a un file HTML, ma il browser non vedere i cambiamenti.Si tiene la copia nella cache del browser, anche se il web server ha una versione più recente.

Non fino a quando ho forzare il browser a cancellare la cache faccio a vedere i cambiamenti.

È questo un web-server di configurazione?Ho bisogno di impostare il mio file JavaScript mai cache?Ho visto alcune interessanti tecniche Google Web Toolkit in cui effettivamente creare un nuovo JavaScript nome del file ogni volta che un aggiornamento è fatto.Credo che questo sia per evitare che i proxy e i browser da mantenere le vecchie versioni dei file JavaScript con gli stessi nomi.

C'è un elenco di migliori pratiche da qualche parte?

Answer 1

Aggiungiamo un numero di build del prodotto alla fine di tutti i Javascript e CSS etc.) in questo modo:

<script src="MyScript.js?4.0.8243">

Browser ignorano tutto quello che viene dopo il punto interrogativo, ma gli aggiornamenti di causare un nuovo URL che significa cache-reload.

Questo ha il vantaggio che è possibile impostare le intestazioni HTTP che significa "mai cache!"

Answer 2

Si tiene la copia nella cache del browser, anche se il web server ha una versione più recente.

Questo è probabilmente perché il HTTP Scadenza / Cache-Control intestazioni sono impostati.

http://developer.yahoo.com/performance/rules.html#expires

Ho scritto su questo qui:

http://www.codinghorror.com/blog/archives/000932.html

Questo non è un cattivo consiglio, di per sé, ma può causare problemi enormi se si sbaglia.In Microsoft IIS, per esempio, l'intestazione di Scadenza è sempre disattivato per impostazione predefinita, probabilmente proprio per questo motivo.Impostando un header Expires on HTTP risorse, si sta dicendo che il client non verificare mai la disponibilità di nuove versioni di tale risorsa - almeno non fino a quando la data di scadenza sulla intestazione di Scadenza. Quando dico mai, intendo dire che -- il browser non anche chiedi per una nuova versione;ti basta assumere la sua versione in cache è buona per andare fino a quando il cliente cancella la cache, o la cache si raggiunge la data di scadenza. Yahoo note che si cambia il nome del file di queste risorse di cui hanno bisogno aggiornato.

Tutto quello che ti viene risparmio è il costo del client di eseguire il ping del server per una nuova versione e ottenere un 304 not modified indietro nel caso comune in cui la risorsa non è cambiato.Non è molto carico..a meno che non sei Yahoo.Certo, se si dispone di un set di immagini o script che quasi non cambiare mai, sicuramente sfruttare memorizzazione nella cache del client e accendere l'header Cache-Control.La cache è fondamentale per le prestazioni del browser;ogni sviluppatore web dovrebbe avere una profonda comprensione di come la memorizzazione nella cache HTTP opere.Ma usare solo in un intervento chirurgico, limitatamente per quelle cartelle o file specifici che si possono trarre vantaggio.Per tutto il resto, i rischi superano i benefici.Certamente non è qualcosa che si desidera acceso come una coperta di default per tutto il vostro sito web..a meno che non ti piace modifica dei nomi dei file ogni volta che cambia il contenuto.

Answer 3

@Jason e Darren

IE6 tratta qualsiasi cosa con una stringa di query come non in cache.Si dovrebbe trovare un altro modo per ottenere il numero di versione nell'url, come un falso directory:

<script src="/js/version/MyScript.js"/>

e basta rimuovere il primo livello di directory, dopo js lato server prima di soddisfare la richiesta.

EDIT:Scusate tutti;è Squid, non IE6, che non cache con una stringa di query.Ulteriori informazioni qui.

Answer 4

Ho scritto un post sul blog su come abbiamo superato questo problema qui:

Evitando di JavaScript e CSS Cache dei Problemi in ASP.NET

In sostanza, durante la fase di sviluppo è possibile aggiungere un numero casuale di una stringa di query dopo il nome del file CSS.Quando si fa una build di rilascio, il codice di interruttori per l'uso montaggio del numero di revisione, invece.Questo significa che in un ambiente di produzione, i clienti possono cache del foglio di stile, ma ogni volta che viene rilasciata una nuova versione del sito che sarà costretto a ri-caricare il file.

Answer 5

Anche io sono del metodo di semplicemente rinominando le cose.E non manca mai, ed è abbastanza facile da fare.

Answer 6

è il tuo webserver invio il diritto di intestazioni per dire al browser è una nuova versione?Ho aggiunto anche la data per la querystring prima.ie myscripts.js?data=4/14/2008 12:45:03 (solo la data sarebbe codificato)

Answer 7

@Darren La memorizzazione nella cache problema si è verificato su IIS 6 & Apache 2 out-of-the-box.Non so se la risoluzione corretta è quello di modificare le intestazioni di risposta HTTP, ma invece di prendere la ridenominazione di itinerario descritto in alcune risposte qui.

@Chris Buon suggerimento.Ho pensato che la stringa di query approccio è stato buono, ma suona come un unico file o il nome della directory è necessario per coprire tutti i casi.

Answer 8

Con ogni versione, abbiamo semplicemente anteporre una monotona crescente numero intero il percorso della directory principale di tutte le nostre risorse statiche, che costringe il cliente a ricaricare (abbiamo visto che la stringa di query metodo di pausa in IE6 prima).Per esempio:

• Versione 1:http://www.foo.com/1/js/foo.js
• Versione 2:http://www.foo.com/2/js/foo.js

Si richiede rejiggering collegamenti con ogni release, ma abbiamo costruito la funzionalità per modificare automaticamente i collegamenti con i nostri strumenti di distribuzione.

Una volta fatto questo, è possibile utilizzare Scadenza/Cache intestazioni di Controllo che consentono di cache del client JS risorse "per sempre", in quanto il percorso cambia ogni versione, che credo sia quello che @JasonCohen era arrivare.

Answer 9

Alcune tecniche utili in qui anche se non si prevede di utilizzare powershell per automatizzare la distribuzione.

Answer 10

Per quello che vale, ho visto deviantART sito, abbastanza grande, che serve loro JS file 54504.js.Ho appena controllato e vedere ora servono loro come v6core.i css?-5855446573 v6core_jc.js?4150339741 etc.

Se il problema di stringa di query viene dal server, suppongo che si può controllare che, più o meno.