当前位置:首页 > web性能优化 > 正文

结合minify详解浏览器缓存:expires,cache-control,last-modified,etag

接之前和大家谈到的yslow和minify进行优化的基础上,谈谈最近想目中碰到的一个问题,js混存的问题;

任何一个页面在浏览器的展示,有三种操作;分别是

点击/F5刷新/ctrl + F5强制刷新;3着有很大的区别;

在FF下面用firebug进行头信息抓取,可以清晰看到3着的区别,分别对应于:

200状态(from cache),304状态和200状态;比如多个js文件使用minify进行处理,在服务器添加了js的缓存时间为1周(比如每周发布一个版本);

详情如下图:

cache
如果采用单独的点击,假设有js文件被修改,可是由于minify设置了缓存时间,可以看到/min/config.php的105行左右位置有个配置:

$min_serveOptions['maxAge'] = 604800; //three days

这样,如果用户浏览器没刷新,则该文件一直会被缓存,除非过了缓存时间,否则就是200 from cache,就不会从服务器发送请求;
如果用户使用F5进行刷新,在文件没有更新情况下,会返回304响应头信息;
如果使用ctrl+F5强制刷新,cache-策略:no-cache,这样一定会从服务器拉取文件,返回200;

总体而言,在服务器配置正确的情况下,

通过有效期控制
Expires / Pragma / Cache-Control
优点:浏览器不需要访问Server来验证资源状态
缺点:不够准确,指定的缓存时间段内浏览器默认不会再次请求资源,当产生紧急外网bug时发布的资源无法及时更新到浏览器端。

通过资源状态控制
Last-Modified + If-Modified-Since / ETag + If-None-Match
优点:缓存控制比较精确,随时发布随时生效。
缺点:即使资源已存在于浏览器本地缓存中,也需要请求一次服务器验证资源状态以验证缓存有效性

其他关于各种参数的具体含义,可以参考其他博文

暂无评论

发表评论

您必须 [ 登录 ] 才能发表留言!