How to deal with browser cache?

Question

What are your tricks on getting the caching part of web application just right?

Make the expiry date too long and we'll have a lot of stale caches, too short and we risk the servers overloaded with unnecessary requests.

How to make sure that all changes will refresh all cache?

How to embed SVN revision into code/url?

Does having multiple version side-by-side really help to address version mismatch problem?

Answer 1

I think you are on the right track with putting version numbers on your js css files. And you may want to use a build tool to put all of this together for you like http://ant.apache.org/ or http://nant.sourceforge.net/

Answer 2

Couple of ways to deal with this issue:

Following the clue given about using version #s, if that presents difficulties for you in your build environment it is also just as effective to put a URL parameter at the end of your URL. The browser clients will treat each URL with a different version parameter as URL no in their cache and will download the file again. The servers won't care that the parameter is there, for static content

So, for example, http://mydomain.com/js/main.js can be included in your HTML as http://mydomain.com/js/main.js?v1.5. It might be easier for you to pass version #s into your serverside scripts and append them onto your clientside include URLs.

The second method I've seen work well is to use a controller serverside to deliver your code. Facebook makes use of this. You will see includes in script tags that end in ".php" all the time.

E.g.

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>

Their backend determines what JS needs to be sent to the client based on the environment that was sent up in the request.

Answer 3

Look at the minify project. It's written in PHP but you could use it as a blueprint for any language.

Key features:

• a config file to combine & minify several js or css files into one
• always uses the last modified date of the last modified file in a config group as a URL parameter

example resource might look like

<script type="text/javascript" src="/min/g=js1&1248185458"></script>

which would fetch the 'js1' group of javascript files in your configuration with the version number "1248185458" which is really just the last modified date converted to epoch time.

When you put updated js files on your production servers, they'll have a new modified date which automatically becomes a new version number - no stale caches, no manual versioning.

It's a very cool project with some really well thought out ideas about optimization and caching. I've modified the process slightly to insert YUI compressor into the build process. You can optimize it even more by preventing the last modified lookups from the browser by modifying your server's headers (here and here).