Why does Firefox sometimes cache my CSS & Javascri

问题:

On my product site, Firefox sometimes "doesnt detect" changes in my CSS & Javascript code. Rather it loads the old versions, so it seems that I need to clear the cache. In a situation like this, what should I do? This relates to the latest Firefox (16.0.1 at the time of this writing.)

EDIT!

I forgot to say it mistakes for the localhost css files. I meant, theres an old js file, I update it, upload it, and on product server firefox thinks its the localhost file. The way I include files:

<link rel="stylesheet" href="/xyz.css" type="text/css" />

回答1:

If you are using a server-side language you could use a trick. You can append a string after .css/.js. In PHP for example:

<link rel="stylesheet" type="text/css" href="/style.css?t=<?= time(); ?>" />

It changes every page reload.

Take a look at this article about cache busting.

回答2:

You can use a technique called "cache busting" where you attach a query string to your call to your css/js file. You then update the query string whenever you update your css/js.

Example:

<link rel="stylesheet" type="text/css" href="/styles.css?ver=1" />

回答3:

As mentioned in several other answers you want to have a unique identifier for your static assets based on the content i.e. the identifier changes if and only if the content changes. That way browsers can still use a cached version of a resource as long as the content hasn't changed - which is exactly what you want. This technique is called static asset versioning.

So don't use the current time or a random number/string. If you can, either use the modification time of the file or (better) the md5 hash of its contents. You can append this identifier as a query string (which will be ignored) or (better) append it to the filename before the extension.

To contrast this with and clear the confusion about the technique of cache busting mentioned in some other answers: cache busting is a technique used by advertisers to force the browser to always reload a resource so the advertiser can measure the number of ad impressions by the number of times the resource is requested. This is easily accomplished by using a random number. You don't normally want to use this for your static assets.

回答4:

You can append a version at the end of the css/js you send accross.

For Example

Instead of www.foo.com/js/javascript.js, send www.foo.com/js/javascript.js?v=1 and
Instead of www.foo.com/css/style.css, send www.foo.com/css/style.js?v=1

回答5:

• You can use a meta tag to force the refreshing. <meta http-equiv="Cache-control" content="no-cache">, or <meta http-equiv="pragma" content="no-cache">.
• You can force the HTTP header: Cache-control: no-cache or Pragma: no-cache.
• You can append a random query string to your CSS and JavaScript files.

回答6:

Just gotta clear the cache or hard refresh (Ctrl+F5) I'm afraid.

Another option is to simply change the file name of the JS or CSS file so that FF doesn't recognize it as a cached file (e.g. rename style.css to style2.css).

回答7:

style.css?randomnumber will asure the loading