Why Do Developers Append a Query String in JavaScript Files' Stylesheet Links

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

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.

Why pass parameters to CSS and JavaScript link files like src=../cnt.js?ver=4.0?

It is usually done to prevent caching.

Let's say you deploy version 2 of your new application and you want to cause the clients to refresh their CSS, you could add this extra parameter to indicate that it should re-request it from the server. Of course there are other approaches as well, but this is pretty simple.

What's a queryString doing in this stylesheet's href?

To force update if it is already in browser cache.
the v is probably short for version.

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

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:

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

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.

Is it necessary to append querystrings to images in an img tag and images in css to refresh cached items?

The browser is making these requests after determining an absolute path, so if you are 'cache busting' your static assets in this way, you do need to do it for each file individually, no matter where it's called. You can, however, make it easer on yourself by making it a variable on the backend.

You can append the string as a variable that you only have to update in one place on your backend, probably in conjunction with a CSS pre-processor like LESS or SASS to get all your images.

Or use relative paths to your advantage by adding the version to the base url (site.com/folder/styles.css => site.com/v123/folder/styles.css). This can be added to an existing static asset base url variable in your app, then on the server you can just use a UrlRewrite to strip out the version. This way all the images relatively referred to from your CSS automatically get the version too, having the same 'cache busting' effect.

You could be extra clever and set the variable automatically as part of your build process as the last commit hash from you version control system - which will also make future debugging easier.

What is this number appended to a script url like a parameter?

You can do that to prevent the browser from loading a cached version of the file.

To the browser, that looks like a different file than the last time it was loaded. Every time the page loads, the number should be different, so the browser will request it from the server again instead of loading it from the cache.

The number doesn't have to be different each time. You can change it when you update the file so clients can load the cached version until you update it, after which, because it has a different number, they'll request the new version and cache that.

Related: How to append timestamp to the java script file in tag url to avoid caching shows you how to do it dynamically to your scripts.

---

Related Topics