缓存知识体系之-浏览器缓存(2)

这里将所有后缀为gif、jpg、jpeg、png、bmp、swf这些资源设置了30天的过期时间,而将js和css设置了1个小时的过期时间.你可以继续使用firebug来观察使用expires的情况.

【下篇】

开始之前

昨天的公众号讲解的浏览器缓存的上篇,那么开始之前你可以需要了解的是在Web架构中还都有哪些缓存.刚好我准备了一个相对完整的《缓存知识体系》：https://www.unixhot.com/page/cache

前言

三种浏览器协商的办法让浏览器和我们Web服务器愉快的玩耍,我们把用户的浏览器当做我们派发到千家万户的缓存管理员,他们帮我们Web站点存放和管理缓存,并按照协商的办法给用户呈现,突然有一天有一个看似巧合而又普遍的时间打破了这一切.

如果服务器和用户浏览器的时间不一致呢?我们Web服务器在工程师的管理下可以自动更新时间,保证时钟同步,但是我们怎么保证用户本地电脑的时间都是对的呢?我们并没有办法!那这样就会带来一个问题.比如上面我们将css和js的过期时间为一个小时,但是用户的电脑比服务器时间晚了2个小时,那么用户访问Web站点每次浏览器都会认为立即过期,重新获取数据而不会使用本地缓存,所以我们需要有机制来解决这个问题.

Cache-Control

HTTP1.1中的Cache-Control出现了,用于弥补Expires的不足,通过max-age告诉浏览器缓存过期的相对时间,注意这个相对时间是相对于本地浏览器时间而设置的.

可以看到上图中.max-age的为3600秒,也就是我们在Nginx设置的一个小时.这样浏览器就会根据用户本地时间来计算一个小时后,再让缓过期.

还有一个小细节,不知道你之前是否注意到.浏览器和Web服务器之间协商的时间都是GMT时间,而我们中国实用的时间是GMT+8的时区,所以我们看到的时候比实际上少了8个小时,但是这丝毫不影响他们之间的协商.

Cache-control除了max-age还有以下一个不同的参数：

• Cache-control: public 表示缓存的版本可以被代理服务器或者其他中间服务器识别.
• Cache-control: private 意味着这个文件对不同的用户是不同的.只有用户自己的浏览器能够进行缓存,公共的代理服务器不允许缓存.
• Cache-control: no-cache 意味着文件的内容不应当被缓存.这在搜索或者翻页结果中非常有用,因为同样的URL,对应的内容会发生变化.

浏览器缓存刷新

您真的会使用浏览器的刷新按钮吗?不同的刷新机制可以导致不同级别的缓存失效,让我们来一起测试下.

1. 在地址栏中输入网址后按回车或点击转到按钮.

浏览器会对所有没有过期的内容直接使用本地缓存,这个时候Last-Modified、Etag、和Expires均不会受刷新的影响.

2. 按F5或浏览器刷新按钮.

浏览器会在请求中附加必要的缓存协商,但不允许浏览器直接使用本地缓存.这个时候Last-Modified、ETag就要受影响,要发起缓存协商的动作,但是对Expires无效.

3. 按Ctrl+F5或按Ctrl并点击刷新按钮.

这种方式就是我们说的强制刷新,每次浏览器都发起一个全新的请求,不使用任何缓存.

不知道你是否发现问题,如果你修改了一个设置了Expires缓存1小时的文件,难道你要通知所有用户使用Ctrl+F5强制刷新页面吗?这显然不太可能,接下来我们要来谈谈浏览器缓存过期.

浏览器缓存过期

我们最终对于我们现在的所有静态资源使用了expires的过期时间,彻底消灭了HTTP缓存协商中的HTTP请求,而且由于Cache-Control中适应本地的过期时间,我们应该明显的看到网站流量的下降,但是如果有一天,我们上线了一个js,结果由于bug,我们必须马上替换这个js文件.你们团队敏捷的修复这个bug并发布上线.

这个时候问题来了：然而你会发现已经访问过的用户,依然使用的本地缓存的旧js,造成网站故障.这并不能怪浏览器,是你的Web服务器告诉他3小时之内不要过来烦我,直接使用浏览器本地缓存：比如你再nginx设置的是

解决的思路就是最简单的就是修改文件名,这样浏览器对于新的js文件肯定是会重新获取的,如果你的Web框架有这样的支持,这是再好不过的了,那么还有一种方式就是给文件使用参数加上时间戳：

http://www.example.com/js/code.js?20160101

这样浏览器再解析这个url的时候,就会认为这个是一个新的文件,会重新获取并不会使用浏览器本地缓存.那么不同的语言、不同的Web框架都会有不同的实现方式,这里不在举例.

小技巧：如何查看已发布的小干货?

1. 进入“运维社区”公众号；
2. 点击右上角“小人”图标；
3. 点击“查看历史消息”.

分享嘉宾

赵舜东

江湖人称赵班长,曾在武警某部负责指挥自动化的架构和运维工作,2008年退役后一直从事互联网运维工作.曾带团队负责国内某电商的运维工作,SaltStack中国用户组发起人、《saltstack入门与实践》作者,《运维知识体系》作者.

趁现在,关注我们

牛人并不可怕,可怕的是牛人比我们还努力!关注“运维社区(微信ID：cloud-oaas)”公众号,每天利用空闲时间阅读一篇技术原创干货,满满的小幸福.

长按图片,选择“识别图中二维码”,关注我们.

原创声明：本文章由赵班长原创,请必须全文转载,包括本行.

（编辑：ASP站长网）