写在前面
电面被问到这个问题,当时就懵了,之后仔细看了下这个缓存策略,HTTP博大精深啊,小弟不才望,多多指正。
HTTP定义了与服务器交互的方式,其中最基本的有四种:GET,POST,PUT,DELETE可以说是对应着查、改、增、删。
1、GET /url/xxx 查看
2、POST /url 创建
3、PUT /url/xxx 更新
4、DELETE /url/xxx 删除
一个完整页面显示过程-HTTP工作流程
1.当一个浏览器输入URL向服务器发送一个Request实际是为了得到这个URL的html,之后在本地会收到一个Response.
2浏览器接收到Response分析得到html,发现其中有很多图片还有文件。
3.浏览器继续发送Request从而获取图片,CSS,JS文件。
4.获取成功在浏览器将网页显示出来
GET和POST区别
1.参数:GET参数是直接放到URL上面,通过'?'和'&'链接参数。POST是将参数放到了body体中进行数据传输。这又证明了两点:一、GET请求没有body二、相对来说POST安全一些,只是针对用户而言。但是两者实际上都是不安全的,参数不加密的话随便的抓包软件都能轻松搞定。
2.数据量:GET有大小限制,传统IE中URL的最大可用长度为2048字节,其他浏览器对URL长度限制实现上有所不同。POST请求没有限制。
3.GET使用Request.QueryString来取得变量的值。POST方式通过Request.Form来获取变量的值。(这个我不是很理解,望小伙伴给讲解)。
步入正题
HTTP缓存,明确的要知道GET请求可以被缓存,POST不能被缓存,所以要想在客户端做HTTP的缓存一定要注意使用GET请求!
头域的概念:一图胜千言下图中的右边栏加粗字体都是头域:
Cache,Client,Entity,Transport等等
再看左栏的Result也就是状态码:可以看到我这是304:这代码当前页面在本地的缓存没有过期和服务器一致,可以使用!那这是怎么做到的呢?有下面两种方式。
If-Modified-Since/Last-Modified
If-Modified-Since这个是在Request里面的Cache中的信息用来表示本地缓存最后一次被修改的时间,他被发送到服务器并且和Response的Entity中Last-Modified作比较,如果两者的日期一致,那就说明在此期间页面没有任何改动浏览器可以使用本地缓存。(所提到的头域都可以在上面图中找到,大家结合图来看比较清晰)
If-None-Match/Etag
If-None-Match是在Request中请求头的第一行,他存储一个字符串(资源在服务器的唯一确定标志)。Etag是Response中Entity中的一个字符串。两个也是做比较,相同说明可以使用缓存。
http协商缓存中:Etag/lastModified完整过程(可以配合上面的HTTP流程理解):
1.客户端请求一个页面(A)。
2.服务器返回页面A,并在给A加上一个Last-Modified/ETag。
3.客户端展现该页面,并将页面连同Last-Modified/ETag一起缓存。
4.客户再次请求页面A,并将上次请求时服务器返回的Last-Modified/ETag一起传递给服务器。
5.服务器检查该Last-Modified或ETag,并判断出该页面自上次客户端请求之后还未被修改,直接返回响应304和一个空的响应体。
那么问题来了为什么要使用两种缓缓存方式呢?而且从我的截图中可以看到仅有第二种Etag方式
原因如下:
1.如果一些资源定期生成,这种情况下内容没有变化但是服务器的 Last-Modified改变了,导致文件使用不了缓存。
2.Last-Modified的日期只能精确到秒从上面截图可以看到,如果在1s内做了修改,那么就会出现误判
3.由于If-Modified-Since/Last-Modified这种方式使用时间判断一定要保证服务器和本地的时间的一致。
Etag是资源在服务器的唯一标识符,能够更加准确的控制缓存。Last-Modified 与 ETag 是可以一起使用的,
但是服务器会优先验证 ETag,在一致之后才会判断Last-Modified,判断是否返回304.
修正:当两者同时存在的时候,通过以下表达式来进行缓存策略的判断.感谢@我在睡觉
if ETagFromServer != ETagOnClient || LastModifiedFromServer != LastModifiedOnClient
GetFromServer
else
GetFromCache
参考: StackOverflow-the ETag or Last-Modified HTTP header?
使用Ctrl+F5 强制刷新页面,可以忽略以上讲的两种缓存策略
操作 | Cache-Control | Last-Modified/Etag |
---|---|---|
前进后退 | 有效 | 有效 |
刷新-F5 | 无效 | 有效 |
强制刷新 | 无效 | 无效 |
缓存过期时间
Expires:到期时间。作用: 浏览器会在指定过期时间内使用本地缓存
你可以设置这个时间为Sun, 17-Jan-2038 19:14:07 GMT,因为这个时间是32位unix支持的最大的时间值,就可以做到缓存的东西一直有效。
如果将这个值设置成-1那么缓存将会立即失效。
如果没有设置Expires
对于firefox失效时间=0.1*(Time-Last-Modified ),上一次时间的0.1的时间后失效。这样设计很有道理月九没修改越久的保存效果。如果10没有修改1天后就会失效。
总之,不同的浏览器会有不同的清空缓存方法,大家有兴趣可以看一下。
Cache-Control
通过指定头域Cache-Control,就能实现控制缓存的工作机制。
指令的参数是可选的,多个指令之前可以通过‘,’来实现。请求响应时使用。
缓存请求指令
指令 | 参数 | 说明 |
---|---|---|
no-cache | 无 | 强制向源服务器在次验证 |
no-store | 无 | 不缓存请求或响应任何内容 |
only-if-cached | 无 | 从缓冲获取资源 |
cache-extension | - | 新指令标记 |
缓存响应指令
指令 | 参数 | 说明 |
---|---|---|
public | 无 | 可以向任意方提供相应的缓存 |
private | 可省略 | 向指定用户返回响应 |
no-cache | 可省略 | 缓存前必须确认其有效性 |
cache-extension | - | 新指令标记 |
在缓存请求中使用no-cache指令的目的是为了防止从缓存中返回过期的资源。
客户端发送的请求中如果包含no-cache指令,则表示客户端将不会接收缓存过的响应。于是,中间的缓存服务器必须把客户端请求转发给源服务器。
如果服务器返回的响应中包含no-cache指令,那么缓存服务器不能对资源进行缓存。源服务器以后也将不再对缓存服务器请求中提出的资源进行有效确认,禁止其对响应资源进行缓存操作。
一般的参数会采用no-cache这个指令表示避免使用过期缓存。而no-store表示真正完全不使用缓存
only-if-cached只从缓存服务器本地中换取缓存。只要缓存服务器无法加载响应,就会返回错误状态码504Gateway Timeout。
使用
在iOS上优雅的使用etag缓存
TeamWe github