解决网站缓存引发的难题

本文介绍一些技巧来实现网站文件缓存更新问题，比如借助缓存来减少用户加载页面文件（比如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来帮助用户得到最好的体验。