Needed advice on how to implement js/css versioning

Question

so I am implementing this js/css versioning scheme, where I basically append a checksum of the js/css file. The strategy which I am thinking of is, basically get this check

Answer 1

Well, it's actually simpler in real-life scenarios. You append some unique checksum to the JavaScript file name (you don't change the file itself) and you use that full name in your HTML files. Also when the browser requests for this .js file you use far in the future Expires header (typically one year) so that the browser caches this file "forever". Take a look at the source of the web site you are now using:

(SO uses technique described here by @machineghost).

As long as you don't change the .js file, its checksum and file name are the same and the browser is not doing anything. The file is cached and you said it won't change within a year. So how do you change it? Well, every time you modify the file, checksum changes. The browser sees a differen .js file and is forced to download it. The previous file is useless but the browser will keep it for one year (we don't care).

This way you can combine aggressive caching and rapid changes (no problems with browser caching old JavaScript but using new HTML, etc.)

src attr of the script tag, go to the cache first for the js file

Yes, if this JavaScript file was already downloaded, browser will use cache. This is actually a bit more complicated. If you returned Expires header last time, browser won't even touch your server. If you only returned Last-Modifed header, browser will issue so-called conditional GET - server will only return new contents if the file changed and 304 Not Modified otherwise.