Che cosa fa l'aggiunta di "? V = 1" agli URL CSS e Javascript nei tag link e script?

Ho esaminato un modello HTML 5 di plateplate (da http://html5boilerplate.com/ ) e ho notato l'uso di "?v=1"URL negli riferimenti a file CSS e Javascript.

1. Che cosa fa l'aggiunta "?v=1"di URL CSS e Javascript nei tag link e script?
2. Non tutti gli URL Javascript hanno "?v=1"(esempio dall'esempio seguente:) js/modernizr-1.5.min.js. C'è un motivo per cui questo è il caso?

Campione dal loro index.html:

<!-- CSS : implied media="all" -->
<link rel="stylesheet" href="css/style.css?v=1">

<!-- For the less-enabled mobile browsers like Opera Mini -->
<link rel="stylesheet" media="handheld" href="css/handheld.css?v=1">

<!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
<script src="js/modernizr-1.5.min.js"></script>

<!------ Some lines removed ------>

<script src="js/plugins.js?v=1"></script>
<script src="js/script.js?v=1"></script>

<!--[if lt IE 7 ]>
  <script src="js/dd_belatedpng.js?v=1"></script>
<![endif]-->


<!-- yui profiler and profileviewer - remove for production -->
<script src="js/profiling/yahoo-profiling.min.js?v=1"></script>
<script src="js/profiling/config.js?v=1"></script>
<!-- end profiling code -->

Questi di solito servono per assicurarsi che il browser ottenga una nuova versione quando il sito viene aggiornato con una nuova versione, ad esempio nell'ambito del nostro processo di creazione avremmo qualcosa del genere:

/Resources/Combined.css?v=x.x.x.buildnumber

Poiché questo cambia ad ogni nuovo push del codice, il client è costretto a prendere una nuova versione, proprio a causa della stringa di query. Guarda questa pagina (al momento di questa risposta) per esempio:

<link ... href="http://sstatic.net/stackoverflow/all.css?v=c298c7f8233d">

Penso che invece di un numero di revisione il team SO abbia optato per un hash di file, che è un approccio ancora migliore, anche con una nuova versione, i browser sono costretti a prendere una nuova versione solo quando il file cambia effettivamente .

Entrambi questi approcci ti consentono di impostare l'intestazione della cache su qualcosa di ridicolmente lungo, diciamo 20 anni ... ma quando cambia, non devi preoccuparti di quell'intestazione della cache, il browser vede una diversa querystring e la considera come una diverso, nuovo file.

Questo assicura che stai ricevendo l'ultima versione del file css o js dal server.

E in seguito puoi aggiungere "?v=2"se hai una versione più recente "?v=3", "?v=4"e così via.

Si noti che è possibile utilizzare qualsiasi querystring, ad esempio 'v' non è un must:

"?blah=1"funzionerà pure.

E

"?xyz=1002" funzionerà.

E questa è una tecnica comune perché i browser ora memorizzano nella cache i file js e css meglio e più a lungo.

La soluzione di hash è piacevole ma non realmente leggibile dall'uomo quando vuoi sapere quale versione del file si trova nella tua cartella web locale. La soluzione è date/timecontrassegnare la versione in modo da poterla confrontare facilmente con il file del server.

Ad esempio, se il .js or .cssfile è datato 2011-02-08 15:55:30(ultima modifica), la versione dovrebbe essere uguale a.js?v=20110208155530

Dovrebbe essere facile leggere le proprietà di qualsiasi file in qualsiasi lingua. In ASP.Net è davvero facile ...

".js?v=" + File.GetLastWriteTime(HttpContext.Current.Request.PhysicalApplicationPath + filename).ToString("yyMMddHHHmmss");

Di certo puoi farlo rientrare in buone proprietà prima di iniziare. Niente più scuse.

Buona fortuna, art.

I file Javascript vengono spesso memorizzati nella cache dal browser per molto più tempo di quanto ci si possa aspettare.

Ciò può spesso comportare un comportamento imprevisto quando si rilascia una nuova versione del file JS.

Pertanto, è pratica comune aggiungere un parametro QueryString all'URL per il file javascript. In questo modo, il browser memorizza nella cache il file Javascript con v = 1. Quando rilasci una nuova versione del tuo file javascript, cambi l'URL in v = 2 e il browser sarà costretto a scaricare una nuova copia.

Per rispondere alle tue domande;

"? V = 1" questo è scritto solo per scaricare una nuova copia dei file css e js invece di usarlo dalla cache del browser.

Se si menziona questo parametro della stringa di query alla fine del foglio di stile o del file js, si forza il browser a scaricare un nuovo file, a causa del quale le recenti modifiche ai file .css e .js sono rese effettive nel browser.

Se non si utilizza questo controllo delle versioni, potrebbe essere necessario svuotare la cache di aggiornamento della pagina per visualizzare le modifiche recenti in tali file.

Ecco un articolo che spiega questa cosa Come e perché fare il versioning dei file CSS e JS

Durante lo sviluppo / test di nuove versioni, la cache può essere un problema perché il browser, il server e talvolta anche il 3G Telco (se si esegue la distribuzione mobile) memorizzerà nella cache il contenuto statico (ad es. JS, CSS, HTML, img). Puoi superarlo aggiungendo il numero di versione, il numero casuale o il timestamp all'URL, ad esempio: JSP:<script src="js/excel.js?time=<%=new java.util.Date()%>"></script>

Nel caso in cui tu stia eseguendo HTML puro (anziché pagine JSP, ASP, PHP del server) il server non ti aiuterà. Nel browser, i collegamenti vengono caricati prima dell'esecuzione di JS, pertanto è necessario rimuovere i collegamenti e caricarli con JS.

// front end cache bust
var cacheBust = ['js/StrUtil.js', 'js/protos.common.js', 'js/conf.js', 'bootstrap_ECP/js/init.js'];   
for (i=0; i < cacheBust.length; i++){
     var el = document.createElement('script');
     el.src = cacheBust[i]+"?v=" + Math.random();
     document.getElementsByTagName('head')[0].appendChild(el);
}

Come puoi leggere prima, il ?v=1 assicura che il tuo browser ottenga la versione 1 del file. Quando hai una nuova versione, devi solo aggiungere un numero di versione diverso e il browser dimenticherà la versione precedente e caricherà quella nuova.

C'è un plugin gulp che si occupa della versione dei tuoi file durante la fase di compilazione, quindi non devi farlo manualmente. È pratico e puoi integrarlo facilmente nel tuo processo di creazione. Ecco il link: gulp-annotate

Come menzionato da altri, questo viene utilizzato per il busting della cache del front-end. Per implementarlo, ho trovato personalmente utile il pacchetto npm di grunt-cache-bust.