CODEWITHSUNDEEP
javascriptversion-controlweb
user1386101
user1386101

Reputation: 1944

Needed advice on how to implement js/css versioning

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 checksum value, then compute the checksum of the file(which I presume may come from the cache), if they match, then the client has the latest files, if not then the client browser will force download that particular file from the server. Is this approach correct? Also I wanted to understand the behavior of the script tag, like will the src attr of the script tag, go to the cache first for the js file or to the webserver directly?

Thanks

Upvotes: 3

Views: 1746

Answers (2)

Tomasz Nurkiewicz
Tomasz Nurkiewicz

Reputation: 341003

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:

<script src="http://cdn.sstatic.net/js/stub.js?v=aa8b9e2e0673" type="text/javascript"></script>
<link href="http://cdn.sstatic.net/stackoverflow/all.css?v=ffb907d7e663" rel="stylesheet" type="text/css">

(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.

Upvotes: 2

machineghost
machineghost

Reputation: 35735

Tomasz hit the nail on the head ... except there's an even easier solution :-) Don't change the file name of your files at all; just change the link to them, specifically the "search" part. And you don't really need a checksum, you can also use an incrementing number or the current revision number in your source control system

So in other words:

<script src='myFile.js'/>

would be:

<script src='myFile.someChecksum.js'/>

as Tomasz described it; if instead you do:

<script src='myFile.js?x=someChecksum'/>

the browser will still consider it a new file (when the checksum changes), but you won't have to change the file name everytime. If you use the revision number, you don't even have to compute a checksum everytime, you just need server-side logic to the effect of:

<script src='myFile.js?x={{currentRevisionNumber}}'/>

Upvotes: 2

Related Questions