0

While going through HTML 5 boilerplate template observed few of the places they have used 

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

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

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

But how does this help? How the query string going to work? I don't have the file name changed nor did I wrote any script for doing anything with query string (?v=1) .

What am I missing? Do I need to change the file name or do I need to have a repository for sure to get this working?

Improve this question
5
  • 2
    Well, it's not the same URL, therefore the cache isn't allowed to server the same file... Commented Feb 5, 2014 at 14:30
  • 1
    We used to call this a "cache buster". Of course, given it's static (always 1, not say a timestamp) it's not a very good one. (web server and .css file will just ignore the query string) Commented Feb 5, 2014 at 14:32
  • @ebyrob unless you increment it manually every time you update that file. Commented Feb 5, 2014 at 14:34
  • @Mike manual = bad in this case. Seems so much nicer if say the server could keep track of when style.css changed based on it's file version and then that would control when it got pulled down by client. ... Kinda like what happens with shorter cache header times. Improving on that may be important in very high traffic environments, but it'll quickly make your head spin. Commented Feb 5, 2014 at 14:50
  • @ebyrob Great idea. I had never thought of doing it based on the file modified time. I just implemented it on one of my sites and it works great. Commented Feb 13, 2014 at 1:11

2 Answers 2

Reset to default
7
  1. Most web servers will serve up a static file no matter what query string you put at the end of the URL.
  2. Browsers cache data based on its URL.
  3. Changing the URL to a different one means you won't get the cached version from the old URL but, given (1), the (new version of the) file stored in the same location on the server's disk will be served.

But how does this help? How the query string going to work? I don't have the file name changed nor did I wrote any script for doing anything with query string (?v=1) .

Then it doesn't help. You have to change the query string when you change the file.

What am I missing? Do I need to change the file name

No

or do I need to have a repository for sure to get this working?

You need to change the query string when you release a new version of the file.

One way to do that would be to use a build script that sets the URL to (for example) the commit id that last changed the file in a version control repository.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Good answer -- could explain how the contents of the query string don't matter except to stop the cache
The server just ignores the query string because it is a static file.
yes, my point is js/plugins.js?asldkfjdsafs would serve the same purpose. There is not semantic difference in how the browser handles it except it is different
Correct. You can have anything there, so long as you change it when you change the file. It's helpful to use something meaningful to you as an author though.
@hogan is asldkfjdsafs valid? vs say asldkfjdsafs=asldkfjdsafs? I thought equals was required?
|
1

The query string allow you to say to browsers "hey, my file has changed" and force the refresh of the client cache by updating the version number. Otherwise, the browser will not fetch the file if the client has a valid version in is local cache.

If tomorrow, you're changing the CSS file, you can force your clients to refresh their cache by changing the URL to 

<link rel="stylesheet" href="css/style.css?v=2">

... and so on to every updates.

This approach allows you to set a cache header long in your HTTP headers (1 month or even more) to make browsers don't update their static file cache unless you're explicitly updating the CSS link.

Improve this answer

2 Comments

Not that the file has change -- just the link.
Yep I might mixed my words, fixed.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.