What does appending v 1 to CSS and JavaScript URLs in link and script tags do

Question

I have been looking at a HTML 5 boilerplate template  from http   html5boilerplate com   and noticed the use of  quot  v 1 quot  in URLs when referring to CSS and JavaScript files   What does appending  quot  v 1 quot  to CSS and JavaScript URLs in link and script tags do  Not all JavaScript URLs have the  quot  v 1 quot   example from the sample below  js modernizr-1 5 min js   Is there a reason why this is the case   Sample from their index html   lt  -- CSS   implied media  quot all quot  -- gt   lt link rel  quot stylesheet quot  href  quot css style css v 1 quot  gt    lt  -- For the less-enabled mobile browsers like Opera Mini -- gt   lt link rel  quot stylesheet quot  media  quot handheld quot  href  quot css handheld css v 1 quot  gt    lt  -- All JavaScript at the bottom  except for Modernizr which enables HTML5 elements  amp  feature detects -- gt   lt script src  quot js modernizr-1 5 min js quot  gt  lt  script gt    lt  ------ Some lines removed ------ gt    lt script src  quot js plugins js v 1 quot  gt  lt  script gt   lt script src  quot js script js v 1 quot  gt  lt  script gt    lt  -- if lt IE 7   gt     lt script src  quot js dd belatedpng js v 1 quot  gt  lt  script gt   lt   endif -- gt     lt  -- yui profiler and profileviewer - remove for production -- gt   lt script src  quot js profiling yahoo-profiling min js v 1 quot  gt  lt  script gt   lt script src  quot js profiling config js v 1 quot  gt  lt  script gt   lt  -- end profiling code -- gt

User · Answer

As mentioned by others  this is used for front end cache busting  To implement this  I have personally find grunt-cache-bust npm package useful

User · Answer

These are usually to make sure that the browser gets a new version when the site gets updated with a new version  e g  as part of our build process we d have something like this    Resources Combined css v x x x buildnumber   Since this changes with every new code push  the client s forced to grab a new version  just because of the querystring   Look at this page  at the time of this answer  for example    lt link     href  http   sstatic net stackoverflow all css v c298c7f8233d  gt    I think instead of a revision number the SO team went with a file hash  which is an even better approach  even with a new release  the browsers only forced to grab a new version when the file actually changes    Both of these approaches allow you to set the cache header to something ridiculously long  say 20 years   yet when it changes  you don t have to worry about that cache header  the browser sees a different querystring and treats it as a different  new file

User · Answer

The hash solution is nice but not really human readable when you want to know what version of file is sitting in your local web folder  The solution is to date time stamp your version so you can easily compare it against your server file    For example  if your  js or  css file is dated 2011-02-08 15 55 30  last modification  then the version should equal to  js v 20110208155530  Should be easy to read properties of any file in any language  In ASP Net it s really easy       js v     File GetLastWriteTime HttpContext Current Request PhysicalApplicationPath   filename  ToString  yyMMddHHHmmss      Of coz get it nicely refactored into properties functions first and off you go  No more excuses   Good luck  Art

User · Answer

During development   testing of new releases  the cache can be a problem because the browser  the server and even sometimes the 3G telco  if you do mobile deployment  will cache the static content  e g  JS  CSS  HTML  img   You can overcome this by appending version number  random number or timestamp to the URL e g  JSP   lt script src  js excel js time  lt   new java util Date    gt   gt  lt  script gt    In case you re running pure HTML  instead of server pages JSP  ASP  PHP  the server won t help you  In browser  links are loaded before the JS runs  therefore you have to remove the links and load them with 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  lt  cacheBust length  i          var el   document createElement  script         el src   cacheBust i    v     Math random         document getElementsByTagName  head   0  appendChild el

User · Answer

As you can read before  the  v 1 ensures that your browser gets the version 1 of the file  When you have a new version  you just have to append a different version number and the browser will forget about the old version and loads the new one   There is a gulp plugin which takes care of version your files during the build phase  so you don t have to do it manually  It s handy and you can easily integrate it in you build process  Here s the link  gulp-annotate

User · Answer

Javascript files are often cached by the browser for a lot longer than you might expect   This can often result in unexpected behaviour when you release a new version of your JS file   Therefore  it is common practice to add a QueryString parameter to the URL for the javascript file  That way  the browser caches the Javascript file with v 1  When you release a new version of your javascript file you change the url s to v 2 and the browser will be forced to download a new copy

User · Answer

This makes sure you are getting the latest version from of the css or js file from the server   And later you can append   v 2  if you have a newer version and   v 3     v 4  and so on   Note that you can use any querystring   v  is not a must for example     blah 1  will work as well   And     xyz 1002  will work   And this is a common technique because browsers are now caching js and css files better and longer

User · Answer

In order to answer you questions   quot  v 1 quot  this is written only beacuse to download a fresh copy of the css and js files instead of using from the cache of the browser  If you mention this query string parameter at the end of your stylesheet or the js file then it forces the browser to download a new file  Due to which the recent changes in the  css and  js files are made effetive in your browser  If you dont use this versioning then you may need to clear the cache of refresh the page in order to view the recent changes in those files  Here is an article that explains this thing How and Why to make versioning of CSS and JS files

[html] What does appending "?v=1" to CSS and JavaScript URLs in link and script tags do?

Examples related to html

Examples related to css

Examples related to browser-cache