浏览器缓存分析之Last-Modified/If-Modified-Since

今天网站出现了很多用户的浏览器因为缓存了我们旧版本的js文件而导致了一个模块的不正常。经过调查发现是由于交互过程中使用了浏览器的头信息Last-Modified/If-Modified-Since导致浏览器不去加载最新的js文件引起的。这个发生的过程是这样的：

1. 首先发布一个版本的js文件 xx.js, 文件修改时间假设为 2013-03-12 00：00.

2. 然后访问有xx.js文件的页面，浏览器将加载该文件。

3. 然后重新发布xx.js， 但文件修改时间为 2013-03-1 1 23：59， 也就是比上一个时间旧一些。

4. 然后重新访问有xx.js文件的网页，那么，由于设置了请求头If-Modified-Since 参数，系统会发现服务器返回的头信息中参数Last-Modified比较旧，这时浏览器就直接读取缓存中的xx.js，而不会去加载服务器上最新的js文件。

我们看对一个页面两次访问的请求头信息。

1.首先，我们清理缓存，然后访问页面，这时，页面会去加载js,文件，服务器返回200 状态码。请求头信息如下图：



此时服务器的响应里面返回了ETag(内容的一个hash值)和Last-Modified (服务器设置的文件修改时间)参数。

2.第二次访问这个页面，那么浏览器将在请求中添加参数 If-Modified-Since（值为上次响应里面的Last-Modified值）， 和 If-None-Match

（值为上次响应的ETag）值。这时服务器收到请求后会对比文件是否在If-Modified-Since的时间之后被修改过，如果没有，它会返回一个304状态码给浏览器，告知内容无变化，可以使用本地浏览器缓存数据。另外ETag信息可以用来对比内容，它可以将请求头中的值拿过来和服务器端生成的ETage值进行对比，以决定文件内容是否变化。那我们看看第二次请求的内容，看请求中的If-Modified-Since, If-None-Match,



那么，明白了这个过程，其实我们可以明白，要让浏览器刷新使用文件可以有两个办法：

1）修改文件的修改时间，让服务器生成一个和原有文件不同的ETage，这样对于这种启用了缓存的服务器向浏览器返回200状态码即可驱动浏览器去加载最新的js文件。

2）很暴力，会增加服务器压力的方法：当浏览器请求服务器上某些需要时刻更新的文件时，永远返回200。这个从机理上可以达到让浏览器加载最新文件的目的，但副作用就是每次都要下载js文件，速度慢，服务器压力大。

总上所说，如果我们要更新一个js文件，无论如何都保证它的文件修改时间是新的，这样用户浏览器才会去加载最新文件的。