解决缓存引发的CSS/JS/IMG问题

这次转载的文章讲的是CSs缓存的问题。CSS一般情况下，我们都会做一定的缓存，毕竟这玩意很少会动它，但对于一个稍大一点的网站来说，它就可能会经常变动了。
然而，CSS对于浏览器来说，一般情况下是会被自动缓存的，所以我在导入CSS的时候，都会制定一个版本号放在文件后面如：xxx.css?20091010，下次更新的时候，把这个日期改一下。用户在加载的时候会认为这是一个新文件 。。。

以下是博客园的用户写的文章 ：

如何平衡的使用浏览器缓存？平时我们借助缓存来减少用户加载页面文件（比如js,css,image等）的时间和带宽，同时我们要确保用户访问的上述文件时最新的。而后者是我们常常头疼的问题。
本文主要介绍一些小的技巧来确保在网站文件被缓存的同时，又可以得到良好的性能和最新的更新的网站内容。
问题描述
比如我们在某页面加载了css文件，
<link rel="stylesheet" href="/css/styles.css" type="text/css" />
如何优化页面访问的性能呢？
手段1、使用缓存。通常我们希望此文件被浏览器缓存一定的时间，这样可以用户访问此页面的时候不必每次都向服务器请求下载此文件。我们也可以配置服务器在页面添加”Expires”头信息，从而告诉浏览器缓存此文件的时间。
手段2、我们使用yuicompressor等压缩工具对css文件进行压缩，减小文件的大小。
问题是当因版面风格的更新，此css已经做了更新，但是用户可能仍然使用的是旧的页面主题，甚至错乱的页面。这样对用户的体验非常不好。
解决之道：
根本原理：欺骗浏览器，让它认为它加载的文件跟缓存的文件不一样。
方法一、修改文件名
<link rel="stylesheet" href="/css/styles.1234.css" type="text/css" />
方法二、增加Query string
<link rel="stylesheet" href="/css/styles.css?v=1234" type="text/css" />
方法三、修改引用文件路径
这里最好的是在服务器配置文件中进行配置来实现文件路径映射（url mapping）。
<link rel="stylesheet" href="/css.1234/styles.css" type="text/css" />
以上我们以css为例进行了说明，我们来看看图片和js文件。
Images
由于图片的引用一般写在css文件中，并采用相对路径，所以当css的引用路径发生变化的时候，根据重写规则，图片被解析的路径自然会同步发生更新。
JS
适用于css的方法同样都适用于JS。
结束语
当然web站点性能的优化，除了缓存之外，还有许多的方法。比如我们可以借助YSlow来帮助用户得到最好的体验。

原文：http://haotushu.sinaapp.com/post-267.html