Aggressive JavaScript caching

It holds onto the copy cached in the browser, even though the web server has a newer version.

This is probably because the HTTP Expires / Cache-Control headers are set.

http://developer.yahoo.com/performance/rules.html#expires

I wrote about this here:

http://www.codinghorror.com/blog/archives/000932.html

This isn't bad advice, per se, but it can cause huge problems if you get it wrong. In Microsoft's IIS, for example, the Expires header is always turned off by default, probably for that very reason. By setting an Expires header on HTTP resources, you're telling the client to never check for new versions of that resource -- at least not until the expiration date on the Expires header. When I say never, I mean it -- the browser won't even ask for a new version; it'll just assume its cached version is good to go until the client clears the cache, or the cache reaches the expiration date. Yahoo notes that they change the filename of these resources when they need them refreshed.

All you're really saving here is the cost of the client pinging the server for a new version and getting a 304 not modified header back in the common case that the resource hasn't changed. That's not much overhead.. unless you're Yahoo. Sure, if you have a set of images or scripts that almost never change, definitely exploit client caching and turn on the Cache-Control header. Caching is critical to browser performance; every web developer should have a deep understanding of how HTTP caching works. But only use it in a surgical, limited way for those specific folders or files that can benefit. For anything else, the risk outweighs the benefit. It's certainly not something you want turned on as a blanket default for your entire website.. unless you like changing filenames every time the content changes.

We append a product build number to the end of all Javascript (and CSS etc.) like so:

<script src="MyScript.js?4.0.8243">

Browsers ignore everything after the question mark but upgrades cause a new URL which means cache-reload.

This has the additional benefit that you can set HTTP headers that mean "never cache!"