Cache busting via params

javascript html css caching
Brad Herman picture Brad Herman · Mar 13, 2012 · Viewed 97.5k times · Source

We want to cache bust on production deploys, but not waste a bunch of time off the bat figuring out a system for doing so. My thought was to apply a param to the end of css and js files with the current version number:

<link rel="stylesheet" href="base_url.com/file.css?v=1.123"/>

Two questions: Will this effectively break the cache? Will the param cause the browser to then never cache the response from that url since the param indicates that this is dynamic content?

Answer

Marshall picture Marshall · Mar 13, 2012

The param ?v=1.123 indicates a query string, and the browser will therefore think it is a new path from, say, ?v=1.0. Thus causing it to load from file, not from cache. As you want.

And, the browser will assume that the source will stay the same next time you call ?v=1.123 and should cache it with that string. So it will remain cached, however your server is set up, until you move to ?v=1.124 or so on.

Related questions

Retrieve the position (X,Y) of an HTML element relative to the browser window

I want to know how to get the X and Y position of HTML elements such as img and div in JavaScript relative to the browser window.

Read More
Set cookie and get cookie with JavaScript

I'm trying to set a cookie depending on which CSS file I choose in my HTML. I have a form with a list of options, and different CSS files as values. When I choose a file, it should be saved …

Read More
Failed to load resource: the server responded with a status of 404 (Not Found)

I can't solve my link problem. Could you help on to this to link CSS and JS File? CSS: <link href="../Jquery/jquery.multiselect.css" rel="stylesheet"/> <link href="../Jquery/style.css" rel="stylesheet" /> <link …

Read More