开发者

Css file caching

I have a system where cache max-age is set to 0 and there is problem, when I have made some changes in my style.css fail the changes dont apear to client. Browser will use the old cached version of css. I have simple qu开发者_开发技巧estion: Does naming css file as style.css?123 will be cached as a new?


Yes, adding a unique query string to the resource's URI will force the client to fetch a "fresh" version (since the client doesn't know that it's merely an update of a previously cached resource). This is known as fingerprinting and you typically use a timestamp or an incrementing version number1 of the CSS file.

Google Web Fundamentals has a great article on HTTP cache optimization. Especially the section titled "Invalidating and updating cached responses:"

How do you get the best of both worlds: client-side caching and quick updates? You change the URL of the resource and force the user to download the new response whenever its content changes. Typically, you do this by embedding a fingerprint of the file, or a version number, in its filename—for example, style.x234dff.css.

Do note, that the fingerprint does not need to be a sequential number. Any value – hash, version, etc. – will do as long as the risk of collisions is limited.


1) This is what's done here on SO, e.g. http://sstatic.net/js/global-login.js?v=12


You can append a unique query string, although this will use bandwidth.

You can rename your CSS file every time you make a change, IE:

main-v1.css main-v2.css main-v3.css

And then re-reference it in your pages. This saves bandwidth and forces browsers to reload it.


yes, appending a querystring parameter in each style.css file will force it to cache again.
because browser caches each static component with its url, so when url is changed, the new file will be cached.


You can trick the browser into thinking it's a new stylesheet every second by timestamping your CSS:

<link rel="stylesheet" type="text/css" href="style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" />

Which will give you this:

<link rel="stylesheet" type="text/css" href="style.css?Thursday 24th of April 2008 04:45:21 PM" />

Taken from: Can We Prevent CSS Caching?


Using .htaccess file, you can define caching control on you files with special extensions.

You could include the following code in a .htaccess file:

<FilesMatch "\.(css)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>

For more information about .htaccess file, see Apache .htaccess Guide

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜