一 Http缓存基本概念

1.1 Http报文

在浏览器和服务器进行Http通信时发送的数据即为Http报文,其中分为两部分:

  1. header - 报文的首部或头部,其中保存着各类请求的属性字段,关于Http的缓存相关规则信息均保存在header中
  2. body - 请求体部分,Http请求真正传输的主体部分

1.2 首次请求基本规则

Http缓存主要涉及三个角色:一是浏览器,二是浏览器的缓存数据库,三是服务器。当浏览器端向服务器发出第一次请求时:

浏览器缓存数据库服务器查看是否已有缓存数据暂无缓存数据发出请求返回数据和缓存规则存储缓存的数据及相应规则浏览器缓存数据库服务器

首次请求后即如上流程图所示执行,而当浏览器再次执行同一的请求时,根据不同的缓存类型将会执行不同的行为。
下面举个具体的请求例子:

这是首次请求某网站资源时的http报文情况,其中的Cache-Control即是用来控制缓存的规则字段,另外还有一些其他的规则字段也是同样用来控制缓存,下面从缓存的类型说起。

二 缓存的类型

Http缓存主要分为两种:强缓存协商缓存
两种缓存分别通过Http报文头部不同的字段进行控制,下面将分别介绍两种缓存:

2.1 强缓存

强缓存基本原理是:所请求的数据在缓存数据库中尚未过期时,不与服务器进行交互,直接使用缓存数据库中的数据。当缓存未过期时基本流程如下:

浏览器缓存数据库查看是否已有缓存数据有缓存数据且未过期,直接使用浏览器缓存数据库

当缓存未命中时,则重新向服务器请求数据,其基本流程与首次请求时相似:

浏览器缓存数据库服务器查看是否已有缓存数据缓存数据过期发出请求返回数据和缓存规则存储缓存的数据及相应规则浏览器缓存数据库服务器

而控制强缓存过期时间的主要有两个规则字段:

  1. Expire 其指定了一个日期/时间, 在这个日期/时间之后,HTTP响应被认为是过时的。但是它本身是一个HTTP1.0标准下的字段,所以如果请求中还有一个置了 “max-age” 或者 “s-max-age” 指令的Cache-Control响应头,那么 Expires 头就会被忽略。
  2. Cache-Control通用消息头用于在http 请求和响应中通过指定指令来实现缓存机制。其常用的几个取值有:
    private:客户端可以缓存
    public:客户端和代理服务器都可以缓存
    max-age=xxx:缓存的内容将在xxx 后失效
    s-max-age=xxx:同s-max-age,但仅适用于共享缓存(比如各个代理),并且私有缓存中忽略。
    no-cache:需要使用协商缓存来验证缓存数据
    no-store:所有内容都不会缓存,强缓存和协商缓存都不会触发
    must-revalidate:缓存必须在使用之前验证旧资源的状态,并且不可使用过期资源。

结合实际的请求来看:

在打开一个网页时,这些size为from disk cache的即为从磁盘中读取,即命中了强缓存。打开一个具体的命中的请求:

其中的Cache-Control字段中即标识了缓存可以被客户端和代理服务器缓存,并且缓存的时间为315…秒(365天)后失效,我们在执行这一请求时在其缓存过期时间之内,所以直接命中并从磁盘中读取,不需要与服务器交互。

2.2协商缓存

当强缓存过期未命中或者响应报文Cache-Control中有must-revalidate标识必须每次请求验证资源的状态时,便使用协商缓存的方式去处理缓存文件。
协商缓存主要原理是从缓存数据库中取出缓存的标识,然后向浏览器发送请求验证请求的数据是否已经更新,如果已更新则返回新的数据,若未更新则使用缓存数据库中的缓存数据,具体流程如下,当协商缓存命中

浏览器缓存数据库服务器获取缓存数据的标识返回缓存数据标识请求服务器验证标识的数据是否失效通知标识的数据未失效获取缓存数据返回缓存数据浏览器缓存数据库服务器

协商缓存未命中的情况:

浏览器缓存数据库服务器获取缓存数据的标识返回缓存数据标识请求服务器验证标识的数据是否失效数据已失效,返回新的数据和缓存规则将新数据和新缓存规则存入缓存系统浏览器缓存数据库服务器

结合具体的请求来看,首先是第一次发送某请求后服务器的response:

两个字段etaglast-modified是用于协商缓存的规则字段。其中etag是所请求的数据在服务器中的唯一标识,而last-modifind标识所请求资源最后一次修改的时间。
在缓存时间3600秒过去之后,我们再次发起同样的请求:

可以看到,在我们的请求中有这样两个字段if-modifind-sinceif-none-match,两个字段分别对应着响应中的last-Modifiedetag,用来对协商缓存进行判断:

  1. 首先,如果在第一次请求中有etaglast-modified时,缓存数据库会保存这两个字段,并且在再次发起同样的请求时以if-none-matchif-modified-since发送保存的last-modifiedetag数据。
  2. 服务器收到请求后会以优先级if-none-match > if-modifind-since的顺序进行判断,如果资源的etagif-none-match相等,即所请求的资源没有变化,此时浏览器即可以使用缓存数据库中的数据,此时http的请求状态码为304,请求的资源未变化。
  3. 如果请求字段中没有if-none-match,就使用if-modified-since来判断。如果if-modified-since的值和所请求的资源时间一致,即所请求的资源相同,浏览器即可以使用缓存数据库中的数据。http状态码304

三 总结

最后以流程图的形式总结浏览器缓存机制:

Http缓存机制与原理相关推荐

  1. 干货 | 彻底弄懂 HTTP 缓存机制及原理

    转载自  干货 | 彻底弄懂 HTTP 缓存机制及原理 前言 Http 缓存机制作为 web 性能优化的重要手段,对于从事 Web 开发的同学们来说,应该是知识体系库中的一个基础环节,同时对于有志成为 ...

  2. syslog 向内存中缓存_动画:深入浅出从根上理解 HTTP 缓存机制及原理!

    HTTP 缓存,对于前端的性能优化方面来讲,是非常关键的,从缓存中读取数据和直接向服务器请求数据,完全就是一个在天上,一个在地下. 我们最熟悉的是 HTTP 服务器响应返回状态码 304,304 代表 ...

  3. HTTP缓存机制和原理

    转自:微点阅读  https://www.weidianyuedu.com/content/2217415861309.html HTTP 缓存,对于前端的性能优化方面来讲,是非常关键的,从缓存中读取 ...

  4. 彻底弄懂HTTP缓存机制及原理

    转载:https://www.cnblogs.com/chenqf/p/6386163.html 彻底弄懂HTTP缓存机制及原理 前言 Http 缓存机制作为 web 性能优化的重要手段,对于从事 W ...

  5. HTTP缓存机制及原理详解(最全)

    前言 缓存技术是无数WEB开发从业人员在工作过程中不可避免的一大问题.在产品开发的时候我们总是想办法避免缓存产生,而在产品发布之时又在想策略管理缓存提升网页的访问速度.了解浏览器的缓存命中原理,是开发 ...

  6. http缓存机制和原理详解

    [背景] http1.1 http1.1 是1997年开始使用的. http是一种协议,用于传输浏览器发送的数据并接收由http server响应的数据. 浏览器就是解释html语言等内容的. htt ...

  7. 彻底弄懂 HTTP 缓存机制及原理 | 干货

    来源:www.cnblogs.com/chenqf/p/6386163.html 前言 Http 缓存机制作为 web 性能优化的重要手段,对于从事 Web 开发的同学们来说,应该是知识体系库中的一个 ...

  8. 网络协议(12) 彻底弄懂HTTP缓存机制及原理

    前言 Http 缓存机制作为 web 性能优化的重要手段,对于从事 Web 开发的同学们来说,应该是知识体系库中的一个基础环节,同时对于有志成为前端架构师的同学来说是必备的知识技能. 但是对于很多前端 ...

  9. HTTP缓存机制与原理详解

    1.1 - 缓存 缓存可以重用已获取的资源能够有效的提升网站与应用的性能. Web 缓存能够减少延迟与网络阻塞,进而减少显示某个资源所用的时间. 借助 HTTP 缓存,Web 站点变得更具有响应性. ...

最新文章

  1. C# Socket系列三 socket通信的封包和拆包
  2. 计算机学院杨洋,美国莱特州立大学吴志强教授访问计算机科学与技术学院
  3. MS CRM 2011——让活动实体在活动菜单中显示
  4. eeprom stm8l 擦除 读写_[STM8L]EEPROM操作读与写
  5. [转载]析构函数的虚析构和非虚析构调用的差别
  6. AI时代的交换机什么样?华为CloudEngine 16800告诉你!
  7. 笔记2014-08-26
  8. 【linux】linux shell if 多条件 并行 字符串判断
  9. NEsper Nuget包
  10. Android--读取通讯录并添加联系人
  11. android 本地存储数组,安卓与iphone自带浏览器对本地存储的支持
  12. 利用Excel动态图表----------使用offset(),match()多种控件,实现筛选作图
  13. 再读德鲁克#1-信息挑战
  14. 深入理解Andorid 卷I 第五章
  15. exclusive 和 lock
  16. 智能电视应用与移动应用开发的比较
  17. 支持幻灯片演示的思维导图软件NovaMind_我是亲民_新浪博客
  18. 闪聚支付 第2章-对接SaaS以及用户认证OAuth2.0概述
  19. Django框架快速入门之后台管理admin(书籍管理系统)
  20. Recurdyn中Subrtine和ProcessNet的dll文件建立

热门文章

  1. 一文梳理SpringSecurity中的登录认证流程
  2. Spark Streaming学习与实践(2)
  3. 使用 word 排版时可能出现的问题与解决方法
  4. 华为陶景文:数字化转型如何实现流程重构?
  5. Java算法-滑动窗口算法(Sliding Window)(十)
  6. 牧师与恶魔-智能寻路版
  7. 知识图谱 | 基础篇
  8. php的crypt,php使用crypt()函数进行加密的方法
  9. 利用docker部署深度学习模型的一个最佳实践
  10. 简单介绍 RPC 框架