web-dev-qa-db-fra.com

Que fait l'ajout de "? V = 1" aux URL CSS et Javascript dans les balises link et script?

J'ai examiné un modèle HTML 5 standard (de http://html5boilerplate.com/ ) et j'ai remarqué l'utilisation de "?v=1" dans les URL lorsque vous faites référence à des fichiers CSS et Javascript.

  1. Qu'est-ce que l'ajout de "?v=1" à CSS et Javascript Les URL dans les liens et les balises de script font?
  2. Toutes les URL Javascript n'ont pas le "?v=1" _ (exemple tiré de l'exemple ci-dessous: js/modernizr-1.5.min.js). Y a-t-il une raison pour laquelle c'est le cas?

Échantillon de leur 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 -->

Merci d'avance.

htmlcssbrowser-cache
130
maxyfc

Celles-ci servent généralement à s’assurer que le navigateur obtient une nouvelle version lorsque le site est mis à jour avec une nouvelle version, par exemple. dans le cadre de notre processus de construction, nous aurions quelque chose comme ceci:

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

Comme cela change à chaque nouveau code Push, le client est obligé de récupérer une nouvelle version, juste à cause de la chaîne de requête. Regardez cette page (au moment de cette réponse) par exemple:

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

Je pense qu'au lieu d'un numéro de révision, l'équipe de SO a opté pour un hachage de fichier, ce qui constitue une approche encore meilleure, même avec une nouvelle version, les navigateurs ne pouvant que récupérer une nouvelle version lorsque le fichier en fait change.

Ces deux approches vous permettent de définir l’en-tête de cache sur quelque chose de ridiculement long, disons 20 ans ... mais quand cela change, vous n’aurez plus à vous soucier de cet en-tête de cache, le navigateur voit une chaîne de requête différente et la traite comme une différent, nouveau fichier.

165
Nick Craver

Cela garantit que vous obtenez la dernière version du fichier css ou js du serveur.

Et plus tard, vous pouvez ajouter "?v=2" si vous avez une version plus récente et "?v=3", "?v=4" etc.

Notez que vous pouvez utiliser n'importe quel querystring, 'v' n'est pas obligatoire, par exemple:

"?blah=1 "fonctionnera aussi bien.

Et

"?xyz=1002" marchera.

Et il s’agit d’une technique courante car les navigateurs mettent maintenant mieux et plus longtemps en cache les fichiers js et css.

22
Amr Elgarhy

La solution de hachage est agréable, mais pas vraiment lisible lorsque vous voulez savoir quelle version de fichier se trouve dans votre dossier Web local. La solution consiste à date/time tamponnez votre version pour pouvoir la comparer facilement à votre fichier de serveur.

Par exemple, si votre .js or .css le fichier est daté 2011-02-08 15:55:30 (dernière modification) alors la version doit être égale à .js?v=20110208155530

Devrait être facile à lire les propriétés de n'importe quel fichier dans n'importe quelle langue. En ASP.Net c'est vraiment facile ...

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

Bien sûr, il est bien refait dans les propriétés/fonctions et c'est parti. Plus d'excuses.

Bonne chance, Art.

13
Art

Les fichiers Javascript sont souvent mis en cache par le navigateur beaucoup plus longtemps que prévu.

Cela peut souvent entraîner un comportement inattendu lorsque vous publiez une nouvelle version de votre fichier JS.

Par conséquent, il est courant d'ajouter un paramètre QueryString à l'URL du fichier javascript. De cette façon, le navigateur met en cache le fichier Javascript avec v = 1. Lorsque vous publiez une nouvelle version de votre fichier javascript, vous modifiez l'URL en v = 2 et le navigateur est contraint de télécharger une nouvelle copie.

7
Robin Day

Afin de répondre à vos questions;

"? v = 1" ceci est écrit uniquement pour télécharger une nouvelle copie des fichiers css et js au lieu d'utiliser depuis le cache du navigateur.

Si vous mentionnez ce paramètre de chaîne de requête à la fin de votre feuille de style ou du fichier js, il oblige le navigateur à télécharger un nouveau fichier, les modifications récentes apportées aux fichiers .css et .js étant alors effectives dans votre navigateur.

Si vous n'utilisez pas ce contrôle de version, vous devrez peut-être effacer le cache d'actualisation de la page afin d'afficher les modifications récentes apportées à ces fichiers.

Voici un article qui explique cette chose Comment et Pourquoi faire un versioning des fichiers CSS et JS

7
Tapan kumar
// 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);
}
2
Conete Cristian

Juste mes deux cents.

Comme vous pouvez le lire auparavant, le ?v=1 _ s'assure que votre navigateur obtient la version 1 du fichier. Lorsque vous avez une nouvelle version, il vous suffit d’ajouter un numéro de version différent. Le navigateur oublie l’ancienne version et charge la nouvelle.

Il y a un plugin gulp qui s'occupe de la version de vos fichiers pendant la phase de construction, vous n'avez donc pas à le faire manuellement. C'est pratique et vous pouvez facilement l'intégrer dans votre processus de construction. Voici le lien gulp-annotate

0
Phugo