HTTP缓存

作者: kuperxu | 来源:发表于2016-03-26 11:41 被阅读2737次

    写在前面

    电面被问到这个问题,当时就懵了,之后仔细看了下这个缓存策略,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等等

    fiddler-get.png

    再看左栏的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

    相关文章

      网友评论

      • Alan12138:.服务器检查该Last-Modified或ETag,并判断出该页面自上次客户端请求之后还未被修改,直接返回响应304和一个空的响应体。请问博主,这个判断并返回的操作需要服务端同学配合做吗?还是这个操作是自动的呢?
        Alan12138:@TeamWe 好的,谢谢指教。
        kuperxu:@Alan12138 不需要服务端配合,你想用etag只需要自己手动开启这个服务就行。不过一般的服务器都已经自己开启了不用手动配置。
      • ssscen:你的表格中所写服务器返回的 no-cache 指令的作用是在缓存前再次确认其有效性,但是在下面引用中却又说“缓存服务器不能对资源进行缓存。源服务器以后也将不再对缓存服务器请求中提出的资源进行有效确认,禁止其对响应资源进行缓存操作。”,请问这两个观点不互相矛盾吗?因为我自己对服务器返回的 no-cache 比较困惑,所以希望你能解答一下
        hqzxjczx:表格中所写服务器返回的 no-cache 指令的作用是在缓存前再次确认其有效性,这样应该是正确的。
      • 4588e4274830:还好😂
      • 一俢:收藏
      • seawen:稀饭
      • 530bdfd8f56c:一般get 传数据格式为?key=value&key=value key value 就是QueryParam get 传数据一般都是传的参数 例如第几页第几个 或是某个具体评论 .而post 一般用于用户要提交写内容 例如回复和评论 在网站里面post body 都是以通过html form 这个tag 来提交的 所以Request.form应该是去取form 里面数据 get 其实真心关系的数据应该是传到参数
        kuperxu:@杰聪 get了,谢谢!!!
      • K恨:谢谢
      • 我在睡觉:有一疑问,如果etag一致,为何还要去看last-modified呢?
        kuperxu:@我在睡觉 这个确实没有写清,表示抱歉!首先这个Etag和Last-modified产生的时候是一个or的关系并不是and的关系,也就是会按需生成缓存策略。如果获取最后修改时间时间复杂度高那就只生成Etag。也可以看到文中的截图只有Etag。如果两者都生成了,那么两者都进行检测也不浪费时间复杂度了。ps:生成算法要比比较复杂的多!
        kuperxu:@小睿7777777 👍
        小睿7777777:@我在睡觉 Etag的生成算法不一定准确嘛(一个资源在不同状态下Etag可能相同),所以再检查下last-modified也不算事 :+1:

      本文标题:HTTP缓存

      本文链接:https://www.haomeiwen.com/subject/czkdlttx.html