Perché passare i parametri ai file di collegamento CSS e JavaScript come src = “../cnt.js? Ver = 4.0”?

Quando ho visto il codice sorgente di molti siti, i parametri sono stati passati al file di collegamento (CSS / JavaScript).

Nella fonte Stack Overflow, ho ottenuto

 

Perché è master.js?v=55c7eccb8e19 ?

Sono sicuro che i file JavaScript / CSS non possono ottenere i parametri.

Qual è il motivo?

Di solito è fatto per prevenire il caching.

Supponiamo che tu distribuisca la versione 2 della tua nuova applicazione e desideri che i client aggiornino i loro CSS, potresti aggiungere questo parametro aggiuntivo per indicare che dovrebbe richiederlo nuovamente dal server. Naturalmente ci sono anche altri approcci, ma questo è piuttosto semplice.

Come hanno detto gli altri, probabilmente è un tentativo di controllare il caching, anche se penso che sia meglio farlo cambiando il nome effettivo della risorsa ( foo.v2.js , non foo.js?v=2 ) piuttosto che una versione nel stringa della domanda. (Questo non significa che devi rinominare i file, ci sono modi migliori per mappare quell’URL al file sottostante.) Questo articolo , sebbene abbia quattro anni e quindi sia antico nel mondo del web, è ancora una discussione abbastanza utile. In esso, l’autore afferma che non si desidera utilizzare le stringhe di query per le versioni perché:

… Secondo la lettera della specifica di caching HTTP, i programmi utente non dovrebbero mai memorizzare nella cache gli URL con stringhe di query. Mentre Internet Explorer e Firefox ignorano questo, Opera e Safari non …

Questa affermazione potrebbe non essere del tutto corretta, perché ciò che le specifiche in realtà dicono è

… poiché alcune applicazioni hanno tradizionalmente utilizzato GET e HEAD con URL di query (quelli contenenti un “?” nella parte rel_path) per eseguire operazioni con effetti collaterali significativi, le cache NON DEVONO trattare le risposte a tali URI come nuove se il server non fornisce un tempo di scadenza esplicito

(L’enfasi alla fine è mia.) Quindi l’uso di una versione nella stringa di query può andar bene finché si includono anche intestazioni di cache esplicite. I browser forniti implementano correttamente quanto sopra. E i proxy lo fanno. Vedete perché ritengo che stiate meglio con le versioni nel localizzatore di risorse effettivo, piuttosto che con i parametri di query (che [di nuovo] non significa che dovete rinominare continuamente i file, vedere l’articolo collegato sopra per ulteriori informazioni. Sapete che i browser, i proxy, ecc. Lungo la strada stanno andando a recuperare la risorsa aggiornata se cambiate il suo nome, il che significa che potete dare al “nome” precedente un tempo di cache senza fine per massimizzare il beneficio delle cache intermedie.

Per quanto riguarda:

Sono sicuro che i file Js / CSS non possono ottenere i parametri.

Solo perché il risultato del ritorno è una risorsa JavaScript o CSS, non significa che si tratta di un file letterale sul file system del server. Il server potrebbe eseguire l’elaborazione in base ai parametri della stringa di query e generare una risposta JavaScript o CSS personalizzata. Non c’è motivo per cui non riesco a configurare il mio server per instradare tutti i file .js su un gestore PHP che esamina la stringa di query e restituisce qualcosa di personalizzato in modo che corrisponda ai campi dati. Quindi, foo.js?v=2 potrebbe essere diverso da foo.js?v=1 se ho impostato il mio server per farlo.

Questo per evitare che il browser memorizzi il file nella cache. Il nome della versione aggiunta non ha alcun effetto sul file JavaScript, ma al motore di cache del browser sembra un file unico ora.

Ad esempio, se hai scripts.js e il browser visita la pagina, scarica e memorizza nella cache (archivia) quel file per rendere più veloce la visita della pagina successiva. Tuttavia, se apporti una modifica, il browser potrebbe non riconoscerlo fino alla scadenza della cache. Tuttavia, scripts.js?v2 ora obbliga il browser a eseguire il recupero perché “il nome è cambiato” (anche se non lo è, solo i contenuti lo sono).

Uno script sul lato server che genera il codice CSS o JavaScript potrebbe farne uso, ma probabilmente è solo usato per cambiare l’URI quando il contenuto del file cambia in modo che le vecchie versioni memorizzate nella cache non causino problemi.

  

Questo per forzare il browser a riscrivere il file .js se c’è stato qualche aggiornamento.

Vedete, quando aggiornate il vostro JS su un sito, alcuni browser potrebbero aver memorizzato nella cache la vecchia versione (per migliorare la performance). Sicne vuoi che usino il tuo nuovo, puoi aggiungere qualcosa nel campo query del nome e voíla! Il browser recupera il file!

Questo vale per tutti i file inviati dal server btw.

Poiché i file javascript e css sono memorizzati nella cache dal browser client, quindi aggiungiamo alcuni valori numerici rispetto ai loro nomi per fornire la versione non memorizzata nella cache del file

“Sono sicuro che i file JavaScript / CSS non possono ottenere i parametri”

 function getQueryParams(qs) { qs = qs.split("+").join(" "); var params = {}, tokens, re = /[?&]?([^=]+)=([^&]*)/g; while (tokens = re.exec(qs)) { params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]); } return params; } 

Questo è indicato come busting della cache .

Il browser memorizzerà nella cache il file, inclusa la querystring. La prossima volta che la querystring viene aggiornata, il browser sarà costretto a scaricare la nuova versione del file.

Esistono vari tipi di busting della cache, ad esempio:

  • Statico
  • Appuntamento
  • Versione software
  • Hash-Content

Ho già scritto un articolo sul busting della cache che potresti trovare utile:

http://curtistimson.co.uk/front-end-dev/what-is-cache-busting/