缓存知识体系之-浏览器缓存
|
这里将所有后缀为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-ControlHTTP1.1中的Cache-Control出现了,用于弥补Expires的不足,通过max-age告诉浏览器缓存过期的相对时间,注意这个相对时间是相对于本地浏览器时间而设置的. 可以看到上图中.max-age的为3600秒,也就是我们在Nginx设置的一个小时.这样浏览器就会根据用户本地时间来计算一个小时后,再让缓过期. 还有一个小细节,不知道你之前是否注意到.浏览器和Web服务器之间协商的时间都是GMT时间,而我们中国实用的时间是GMT+8的时区,所以我们看到的时候比实际上少了8个小时,但是这丝毫不影响他们之间的协商. Cache-control除了max-age还有以下一个不同的参数：
浏览器缓存刷新您真的会使用浏览器的刷新按钮吗?不同的刷新机制可以导致不同级别的缓存失效,让我们来一起测试下. 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框架都会有不同的实现方式,这里不在举例. 小技巧：如何查看已发布的小干货?
分享嘉宾
|
