Forcing Browsers To Reload CSS & JS Files

One of the great features of web browsers is that they often cache files locally in order to avoid repeated requests to the web server for files whose contents rarely change.  This allows browsers to perform faster and avoid unnecessary bandwidth consumption.  CSS and JS files are wonderful caching candidates for these very reasons.  However, sometimes CSS and JS files ARE updated on a website, resulting in a need to force the browser to reload these files.  The question, then, is how can we accomplish this?

If you read my previous post, you saw that we can avoid a known AJAX caching issue in Internet Explorer by attaching a unique querystring parameter to the URL of each AJAX request.  It turns out that we can use this same strategy to force browsers to request the latest version of CSS and JS files as well.

For example, a typical CSS and JS reference in a web page looks like this.

<link href="/Content/MyApp.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/Scripts/MyApp.js"></script>

Typically, you’ll have these references on every page in your site. However, rather than request these files from the server for every page visited, browsers will cache these files after the first request and then fetch them from the cache for all pages afterwards. When faced with the need to update these files, we can force the browser to request the updated files from the server by changing the URL with a querystring parameter. This works because browsers cache pages by URL. Using the example above, we can force which files get reloaded using this strategy:

<link href="/Content/MyApp.css?ver=2" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/Scripts/MyApp.js?ver=2"></script>

As you can see, we added a ver=2 querystring parameter to each of the URLs. The first time a browser sees this new URL, it will discover that it doesn’t have an entry in its cache for this URL and will therefore request the file from the server (and then cache it). In this example, we can just increment the ver querystring parameter each time we have a new version of a file that we want to force browsers to load.

Keep in mind that it doesn’t matter what we use as the querystring parameter. We could have just as effectively used foo=bar to achieve the same result. In my work, I typically use ver=[date]. For example: ver=130130 (today’s date of Jan 30, 2013). Whatever convention you choose is really a matter of personal preference, for the end result is still the same. Just make sure that whatever approach you use doesn’t allow for a URL to ever be repeated or you’ll open up the possibility of a browser out there still having a cached copy of an older version of a file, resulting in the cached copy being used.

As Forrest Gump said, “that’s all I have to say about that”.

Please feel free to comment and share.

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s