We are having a project with intensive static resource to make the page load faster we have used browser caching a lot. Now the problem we face is every time we update a static content css or js. The user complains of some issues. I understand that user can 开发者_如何学Cclear cache manually and get the right stuff. But cannot it be possible that when a update file goes. It loads a new version of itself we are using php with wamp.
Firstly, this depends on how long you've sent the expires
header for -- a day? Week? Month?
No matter when you've set the expires header, you have to wait until that time is up before the browser even begins to contact the server for a new version. So you will have to change the url as others have pointed out.
However, there is another good option for you, for the future...
If you set 'cache-control: "no-cache, must-revalidate"'
and a short Expires time, then the browser will check with the server every time it wants to re-display a cached object, using an "If-Modified-Since"
request header to send the last timestamp that your server originally sent with that cached object in its "Last-Modified" response header. If the object has been updated since the timestamp sent by the client, then the server will send the new object and a new Last-Modified
timestamp header. If not, it will respond with only a "304-Not Modified" response header.
So, the advantage of revalidation is that you still save some bandwidth with little risk of the client showing "stale" objects, but the disadvantage is that the client must wait while your server checks the client's If-Modified-Since header against the file's "Last-Modified" timestamp and of course, the server has to actually go check the filesystem to get that "Last-Modified" time. So all that's saved is the actual content transfer bandwidth and transfer time.
Good reading resources:
- http://www.mnot.net/cache_docs/
- http://code.google.com/speed/page-speed/docs/caching.html
The quickest and easiest way to force the user to reload a static resource is to append a query string parameter to it, e.g. if your script is
<script type="text/javascript" src="myscript.js"></script>
Need users to reload it? Append ?v=2
<script type="text/javascript" src="myscript.js?v=2"></script>
Updated it again?
<script type="text/javascript" src="myscript.js?v=3"></script>
etc.
You can force the user to redownload the static files simply by renaming them, or what a lot of people do is add a timestamp to the request with the last updated time eg:
<img src="logo.png?212312313"/>
Everytime this changes, the user will re-download the new file. This can be automated server side by checking the file modified time or by just adding a random string (possibly version number?) by hand.
You can use a trick to force the browser to load newer versions of css / js files.
Assuming your file is called "layout.css" (or "common.js"), then the syntax to include the file is
<link rel="stylesheet" href="/layout.css">
Clever part is to add a querystring to the end of the filename such as
<link rel="stylesheet" href="/layout.css?version=1">
So every time you change your js / css files - add a querystring different to the one that was there before (best way in my opinion is to increment the version number each time you change something).
精彩评论