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

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

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

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

 
其实方法都差很少。为了所谓的 yahoo 的N条军规，你们都在互相折腾。
之因此是N，是由于之前是14条，后来加过两次。就忘了几条了。firebug的插件yslow也能够作简单的测试哦

 

做者：MingleLui
出处：http://mingle.cnblogs.com/