缓存知识体系之-浏览器缓存

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)”公众号,每天利用空闲时间阅读一篇技术原创干货,满满的小幸福.

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

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

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!