Http缓存实现过程图

http缓存分为强制缓存和对比缓存两种, 两者可以混合使用

image.png

图解:

浏览器初次请求网络之后获得数据并进行缓存.
第二次请求网络数据之后, 首先要判断是否有缓存控制字段cache-control, 缓存cache-control的优先级大于比较缓存.

1. 强制缓存的控制字段是 cache-control(http1.0时期有个Expires字段,和cache-control的max-age作用相同, 用来控制过期时间, 优先级低于cache-control的max-age,先不做学习)
   可取值是:private, public, max-age, no-store,no-cache, 默认取值为private
   1.1 private/public: 对于客户端而言, 不需要区分private和public, 客户端均可以进行缓存.
   1.2 max-age: 例如: Cache-control: max-age=31536000 代表强制缓存时长为365天,如果启用这种缓存策略, 只要在有效的缓存期限内, 浏览器将直接读取本地缓存, 不去请求服务器. 当缓存时长过期后, 会使用对比缓存的Etag判断当前是否是最新资源
   1.3 no-cache: 表示未启用强制缓存, 需要去判断有无使用对比缓存, 比较Etag值
   1.4 no-store: 不启用缓存,强制缓存和对比缓存都不会使用!

2. 对比缓存
   1.1 ETag/If-None-Match 这是一组用来判断缓存是否命中(服务器资源是否发生新的变化)的字段.
   Response header返回Etag字段, Etag是一段有服务器生成的随机码, 下发给客户端, 用作一次资源请求的标识符. 相同的Etag代表请求的资源相同.
   Request header将上次response的Etag字段放入到If-None-Match中, 发送服务器作为请求标识.
   服务器对请求标识进行比对, 若没有发生变化则返回状态码304和header, 缓存命中, 客户端从缓存库读取数据.

   1.2 Last-Modified/If-Modified-Since 通过资源的修改时间来判断是否使用缓存, 优先级低于Etag
   Response header返回Last-Modified字段, 标识当前资源的最新修改时间,下发给客户端
   Request header将服务器返回的last-modified作为If-Modified-Since字段发送给服务器
   服务器做时间比对之后, 相同则仅返回304和header, 客户端使用缓存, 不同则返回200和body数据实体.

注明: 以上图片转载至博客彻底弄懂http缓存机制及原理, 写入自己的简书方便以后复习查找.
以上文字为个人理解, 如有错误欢迎指正~ 感谢~