Why do developers append a query string in JavaScript files' stylesheet links?

Question

I have seen this in many sites:

<script src="/file.js?query=string"></script>

<link rel="stylesheet" type="text/css" href="//cdn.sstatic.net/stackoverflow/all.css?v=86c1a91ea87b">
<link rel="apple-touch-icon image_src" href="//cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png?v=fd7230a85918">

Why are developers passing a query string for these scripts and stylesheets, etc.?

Update: I agree this is duplicate But can you tell me how to 'search' to get those original questions?

Answer 1

This is used for invalidating caches.

Check out this brief (albeit old) explanation: http://css-tricks.com/update-on-css-caching/

When the query string is updated, it forces the client's browser to download an updated copy of the stylesheet or script.

Answer 2

One thing that can be used for is to force the browser to re-pull scripts or stylesheets, by changing the query string. That way, in case the file ever changes, and the site wants to force any users to pull the new one instead of using a cached copy, they just change the query string.

For example:

<script src="//whatever.com/something.js"></script>

If you have this on your page, then a browser will pull it down once, then probably cache it for awhile, so every time your page loads, they'll use the cached copy unless they have a reason to try to re-pull (like F5-refreshing the page).

If you use a random query string, then once you change your query string in your markup, the browser has to go pull a new one, since the browser thinks it's a new file (regardless of whether or not it actually is). And the content server will ignore the query string parameters on static files, so it doesn't care what you put:

<script src="//whatever.com/something.js?v=12345"></script>

The browser will grab the file again, whether it needs it or not.

<script src="//whatever.com/something.js?v=98765"></script>

Now it will do it again.

Answer 3

The developers of a web application which are in evolving stage and get changed often encounter the issue that their JavaScript code or CSS changes do not start working until you clear the cache of browser. In case of a live application, you cannot ask users to clear the cache, so to ensure that changes start working developers append the query string to CSS or JavaScript files.

The reason to do this is because browsers cache the GET calls, so multiple calls to JavaScript, that is,

<script src="//example.com/myscript.js"></script>

will not always get the new copy so to overcome this query-string helps:

<script src="//example.com/myscript.js?v=62345"></script>

Any random unique data as query string tells the browser that it is a different call from the previous one, so it always get the new copy. Stack Overflow is also using this technique.

That caching is helpful in cases when your files never get changed or rarely change like a jQuery file that is the reason it is recommended to use a CDN for these files as it already get cached by some other website.

Answer 4

One possibility besides attempting to prevent the CSS from being cached is that those sites are generating their files server-side. The original question, before it was edited to change its meaning, was asking about "scripts and style sheets etc". Because I saw the script element first, which doesn't have a value appended to it that looks like a hash value, my answer would be that it's possible that they are trying to roll all of their scripts into a single file to cut down on HTTP requests, which will speed up their site. That is a recommended best practice for speeding up your site by Yahoo.

After pulling together the appropriate files, the server can then save them to a file as a cached version and avoid fetching everything dynamically again unless the individual pieces are updated.

If I was using PHP:

$page = $_GET['query'];

switch($page)
{
    case 'homepage':
      /* There would be some code here, checking to see if there's 
       * a cached version that could be served up, before doing the 
       * extra work of rolling the scripts together */
      foreach($scripts as $script)
          $combined_script_file .= $script;
      echo $combined_script_file;
      ...
    break;
    case 'blog':
      ...
}

There are plenty of different use cases for server-side processing of files. This is just one.