浏览器缓存之Last-Modified

最近项目更新比较频繁,而且修改的文件也比较多,每次更新完后总有用户报怨页面有些样式或js的效果出不来。原来部署都是运维同事做的,但用户反映的情况出现多了,我也自然关心起来了。经过自己的测试才发现原来,不同的浏览器存在

 

设置浏览器缓存有下面几种方法

Last-Modified:服务器上文件的最后修改时间

Etag:文件标识

Expires:本地缓存目录中,文件过期的时间(由服务器指定具体的时间)

Cache-control:本地缓存目录中,文件过期的时间(由服务器指定过期的间隔时间,由于浏览器根据间隔生成具体的时间)

 

一般情况下,iis会在访问css、js等静态文件时,返回给浏览器Last-Modified和Etag标记,浏览器再次访问服务器的时候会在带上两个标记

If-Modified-Since和If-None-Match,服务器检查参数值,如果文件没有改变则返回304,此时浏览器就访问本地缓存了。如果服务器上该文件被修改过,那么参数值就不一样,服务器就把最后的文件返回给浏览器。

这是Last-Modified和Etag的标准处理方式,但目前的浏览器都是这样吗?

以下对ie9、FF和chrome浏览器进行对比

首第一次访问

ie9

clip_image002

FF

clip_image004

chrome

clip_image006

 

第二次访问,直接在地址栏里回车

ie9

clip_image008

FF

clip_image010

chrome

clip_image012

clip_image014

 

FF和chrome会默认给没有过期时间标记的文件加上一个过期时间,这个时间是多少就不清楚,所以在一段时间内,访问的都是本地的缓存,但ie则是给了一个相当长的时间,所以多次访问的都是本地的缓存。

 

再来看刷新的处理

ie9

clip_image016

FF

clip_image018

chrome

clip_image020

对于刷新对是一样的处理各浏览器。

 

那么修改下服务器文件再访问

ie9

使用缓存

clip_image022

FF

使用缓存(过期时间还没到)

clip_image024

chrome

使用缓存(过期时间还没到)

clip_image026

clip_image028

 

再刷新看一下

ie9

重新请求,内容更新了

clip_image030

FF

重新请求,内容更新了

clip_image032

chrome

重新请求,内容更新了

clip_image034

 

那对于这种地址栏访问的不一样会产生什么问题呢?

当服务器上的文件修改了,由于ie9长时间没有发起请求链接而直接使用本地的缓存,那么将会得到老的文件而不是新的文件。那么对于一些css样式和js效果来说,将会带来很多麻烦。

 

如何解决这个问题?

第一种方法:给js文件或css的请求带个参数,每次更新项目的时候也更新参数,这样就可以了

第二种方法:加上过期时间标记

当文件过期时间到了,文件就会去请求,如果服务器上的文件没有修改过,返回的就是304,如果没有过期时间还没到,不会向服务器发送请求,减少了服务器的开销!!

clip_image036

第三种方法:前两种方法相结合。

 

(另一种情况:更新了网站的内容,但请求后还是原来的旧的内容,这是iis的服务器端的缓存造成的,理论上更新后缓存就应该失效,但iis好像有时候会出现这种问题,回收下应该程序池就行了!)

 

你可能感兴趣的:(浏览器)