In some applications such as MovableType, WordPress, MediaWiki, or any site using certain JavaScript libraries, I've noticed that query strings are appended to some of the calls to the CSS files or script sources. Most often they just pass the version of the application, but sometimes they pass other information:
<script src="/js/2.0/scripts/scriptaculous.js?load=effects" type="text/javascript"></script>
<link rel="stylesheet" href="/blog/mt-static/css/main.css?v=4.01" type="text/css" />
<script src="/wiki/skins/common/wikibits.js?164" type="text/javascript"></script>
I've searched on this technique, but can't figure out for the life of me what good it does. Does anyone have any idea why information would be passed like this? I understand that maybe the script library could react to the the load=effect variable passed to it, but it baffles me as to why you'd bother to pass a version to an otherwise static file. Anyone have any ideas? Please comment with your thoughts.
Comments (8)
September 11, 2008
12:08PM | #
While it may not be true for this case, sometimes that is done to help force the browser to refresh cache.
Also some url rewriting may be going on.
For the JS its probably passing in something to a var about account ID's or the like. for logging if nothing else.
September 11, 2008
12:48PM | #
both CSS and JS files are heavily cached by the browser so if you append a query string to the file the browser caches that full path, so if css and js files are changes you would change the query string value to pull a fresh copy of the asset files..
September 11, 2008
1:09PM | #
I agree that sometimes it's useful to append a random number at the end of a call to a file whose contents are dynamic, but with a script or a CSS file, you want the file to be cached. And note that in many instances (2 out of the 3 examples I use) the value being passed doesn't change-- it reflects the version number of the app. So besides ensuring that a file isn't cached, there must be some other different need. Could this somehow be useful for logging?
September 11, 2008
1:39PM | #
Right, the version number helps the cache.
Example is mycss.css?1
When I change my site I update to 2 so that the new css is loaded. Otherwise theoretically if it stays at 1 it is still cached. Least that is what I would expect.
September 11, 2008
1:45PM | #
Scriptaculous actually uses that parameter to dynamically generate additional script tags to include the referenced library.
If you look at the source, you'll see the code where it does that.
September 11, 2008
1:58PM | #
@Josh: Ah, that turns a light bulb on for me. For frequently-browsed applications that also happen to have frequently-updated code, the inclusion of the version number would guarantee that when the application was updated, the user would load new script and CSS files from the server instead calling old ones from cache. That's a great thought.
BTW, are you interested in going out for a few beverages after your preso next week?
September 16, 2008
3:16PM | #
re: Steve's comment about Scriptaculous is accurate as far as I know. I looked at it a while back and realized what it was doing. It seemed a little odd to me, because it's kind of a "long way around" to get there. When the script loads it fetches all the tags on the page and then checks each one to see if that's the one that has the scriptaculous URL (because it doesn't know) and then parses the SRC attribute value to figure out what else to load. I might have added at least an optional id="scriptaculous" so that it wouldn't need to check every script tag -- some pages have a lot of them. Though the performance issue is no deal-breaker.
September 16, 2008
3:29PM | #
@Ike: good thinking, but the reason that script libraries like Scriptaculous don't add an id="" to scripts is because the ID attribute is not supported by script tags.