28

It's common to want browsers to cache resources - JavaScript, CSS, images, etc. until there is a new version available, and then ensure that the browser fetches and caches the new version instead.

One solution is to embed a version number in the resource's filename, but will placing the resources to be managed in this way in a directory with a revision number in it do the same thing? Is the whole URL to the file used as a key in the browser's cache, or is it just the filename itself and some meta-data?

If my code changes from fetching /r20/example.js to /r21/example.js, can I be sure that revision 20 of example.js was cached, but now revision 21 has been fetched instead and it is now cached?

10 Answers 10

54

Yes, any change in any part of the URL (excluding HTTP and HTTPS protocols changes) is interpreted as a different resource by the browser (and any intermediary proxies), and will thus result in a separate entity in the browser-cache.

Update:

The claim in this ThinkVitamin article that Opera and Safari/Webkit browsers don't cache URLs with ?query=strings is false.

Adding a version number parameter to a URL is a perfectly acceptable way to do cache-busting.

What may have confused the author of the ThinkVitamin article is the fact that hitting Enter in the address/location bar in Safari and Opera results in different behavior for URLs with query string in them.

However, (and this is the important part!) Opera and Safari behave just like IE and Firefox when it comes to caching embedded/linked images and stylesheets and scripts in web pages - regardless of whether they have "?" characters in their URLs. (This can be verified with a simple test on a normal Apache server.)

(I would have commented on the currently accepted answer if I had the reputation to do it. :-)

5
  • I'll need to re-check current browsers, but I can confirm that in the past changing only parameters in the URL did NOT guarantee that the cache would be broken. Keep in mind that my answer was also added almost 3 years ago... a lot has changed since then.
    – scunliffe
    Mar 19, 2011 at 23:49
  • My answer above is also from 3 years ago. I did a thorough test back then and was relieved to find that Safari and Opera both behaved sensibly. Testing this was difficult/confusing, however, because Safari and Opera tended to ignore cache directives on linked resources when reloading pages (or hitting Enter in the location bar) as opposed to accessing them by clicking links. Mar 20, 2011 at 0:02
  • BTW, "changing only parameters in the URL did NOT guarantee that the cache would be broken" is a weird claim. I've never seen anyone suggest this before. Only the opposite (as in the now lost ThinkVitamin article), that browsers don't cache pages with parameters (which they still do). Mar 20, 2011 at 0:15
  • I added a comment to my original answer above. The trick is that there are dozens of browsers (desktop & mobile), proxies, and software apps that consume web content. Since at least historically it wasn't possible to depend on cache-busting via a url parameter I've long since used file re-naming techniques.
    – scunliffe
    Mar 20, 2011 at 0:35
  • 6
    I can't imagine that any cache in the history of browsers, mozilla, netscape, etc. would've ignored the query string when deriving the key for the cache. The whole intent of the query string has always been to alter the http response and ignoring it would have rendered a useless cache. Aug 29, 2019 at 20:47
7

Browser cache key is a combination of the request method and resource URI. URI consists of scheme, authority, path, query, and fragment.

Relevant excerpt from HTTP 1.1 specification:

The primary cache key consists of the request method and target URI. However, since HTTP caches in common use today are typically limited to caching responses to GET, many caches simply decline other methods and use only the URI as the primary cache key.

Relevant excerpt from URI specification:

The generic URI syntax consists of a hierarchical sequence of components referred to as the scheme, authority, path, query, and fragment.

URI         = scheme ":" hier-part [ "?" query ] [ "#" fragment ]
hier-part   = "//" authority path-abempty
              / path-absolute
              / path-rootless
              / path-empty
1
  • 8
    For sure the #fragment part is never used as the cache key. It's not present in the HTTP requests anyway. That's a part of browser's functionality, not HTTP. Mar 27, 2019 at 0:21
2

I am 99.99999% sure that it is the entire url that is used to cache resources in a browser, so your url scheme should work out fine.

1
  • 1
    Well... except for the #fragment part. Mar 27, 2019 at 0:21
2

The MINIMUM you need to identify an HTTP object is by the full path, including any query-string parameters. Some browsers may not cache objects with a query string but that has nothing to do with the key to the cache.

It is also important to remember that the the path is no longer sufficient. The Vary: header in the HTTP response alerts the browser (or proxy server, etc.) of anything OTHER than the URL which should be used to determine the cache key, such as cookies, encoding values, etc.

To your basic question, yes, changing the URL of the .js file is sufficent. TO the larger question of what determines the cache key, it's the URL plus the Vary: header restrictions.

1

In addition to the existing answers I just want to add that it might not apply if you use ServiceWorkers or e.g offline-plugin. Then you could experience different cache rules depending on how the ServiceWorkers are set up.

0

Yes. A different path is the same from the caches perspective.

0

Of course it has to use the whole path '/r20/example.js' vs '/r21/example.js' could be completely different images to begin with. What you suggest is a viable way to handle version control.

0

depends. it is supposed to be the full URL, but some browsers (Opera, Safari2) apply a different cache strategy for urls with different params.

best bet is to change the name of the file.

There is a very clever solution here (uses PHP, Apache)

http://verens.com/archives/2008/04/09/javascript-cache-problem-solved/

Strategy notes: “According the letter of the HTTP caching specification, user agents should never cache URLs with query strings. While Internet Explorer and Firefox ignore this, Opera and Safari don’t - to make sure all user agents can cache your resources, we need to keep query strings out of their URLs.”

http://www.thinkvitamin.com/features/webapps/serving-javascript-fast

8
  • 3
    The ThinkVitamin.com article is wrong. Safari and Opera do cache URLs with query strings just like any URLs. (See my answer for more info) Mar 19, 2011 at 22:32
  • In addition to browsers, some popular proxies require filename changes in order to break the cache. stevesouders.com/blog/2008/08/23/… In this article the Squid proxy server is mentioned (which did change it's default in version 2.7) I'd much rather play it safe and change the filename.
    – scunliffe
    Mar 20, 2011 at 0:19
  • 1
    I'm afraid you're either reading Steve Sounders' post wrong, or typing it wrong. Steve's findings are that his Squid proxy didn't cache the querystring URL - which is the exact opposite of "require filename changes in order to break the cache". Mar 20, 2011 at 1:34
  • Relating to the question asked "Is it the filename or the whole URL used as a key in browser caches?" then the answer is a simple "Yes". That some (usually outdated intermediary proxies) play it safe and will not cache some types of URLs is a minor annoyance, and does not change the basic fact that the whole URL is used as a key in all web chaches. Mar 20, 2011 at 1:39
  • Just for posterity: I feel that "user agents should never cache URLs with query strings" is missing a critical part from RFC2616: "since some applications have traditionally used GETs and HEADs with query URLs [...] to perform operations with significant side effects, caches MUST NOT treat responses to such URIs as fresh unless the server provides an explicit expiration time" (emphasis mine).
    – Arjan
    Aug 12, 2014 at 23:26
0

Entire url. I've seen a strange behavior in a few older browsers where case sensitivity came into play.

-1

In most browsers the full url is used. In some browsers, if you have a query in the url, the document will never be cached.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.