HTTP强缓存、协商缓存

浏览器缓存

缓存是一种保存资源副本并在下次请求时使用改副本的技术。浏览器缓存是浏览器会把用户最近请求过的资源 存储在本地,当再次请求该资源时,浏览器会拦截请求,直接返回本地存储的资源,而不会在去源服务器重新下载。好处:

  • 缓解服务器端压力
  • 加快客户端网页加载速度
  • 减少冗余的数据传输

浏览器缓存过程

  1. 浏览器首次请求资源时,因本地无缓存,向 web 服务器发送请求,服务器响应请求 + 缓存相关(Cache-Control,Expires,Etag,Last-Modified)的头部字段信息,浏览器进行缓存。

  2. 浏览器后续再次请求资源时,会根据该资源缓存的头部字段信息,来决定使用 强缓存 or 协商缓存?
    cache

    • 获取该资源缓存的头部字段信息,根据Cache-ControlExpires来判断是否过期。没过期,从缓存中获取该资源。
    • 已过期,向服务端发送请求时
      • 通过If-None-Match头字段 将Etag发送给服务器,服务器对比客户端发过来的 Etag 是否与服务器相同,相同证明资源未修改过,返回 304,继续使用本地缓存;若不同,返回 200+最新新资源。
      • 通过If-Modified-Since头字段 将Last-Modified发送给服务器,服务器根据最后修改时间判断客户端的资源是否为最新的,是最新的,返回 304,客户端继续使用本地缓存,不是最新的,返回 200+最新资源。

强缓存

强缓存利用Cache-ControlExpires字段来控制的,设置资源的过期时间,如果没过期,从缓存读取该资源,过期了则向服务器请求资源。Cache-Control的优先级高于Expires

Cache-Control (http1.1)

cache-control:max-age=3600,代表着资源的有效期是 3600 秒,其他常用的值:

  • no-cache: 不使用本地缓存。使用协商缓存
  • no-store: 禁止浏览器缓存资源,每次请求资源,都会向服务器发送请求,并返回完整资源
  • public: 可以被所以用户缓存,包括客户端用户和 CDN 等中间代理服务器
  • private: 只能被客户端用户的浏览器缓存

Expires(http1.0)

它的值是绝对时间格式的 GMT 格式的字符串(expires:Wed, 27 May 2020 00:19:59 GMT)。表示该资源的失效时间。发送请求在该失效时间之前,使用本地缓存,否则向服务器请求资源。明显缺点:服务器与客户端有时间偏差,如果偏差较大,导致缓存混乱

协商缓存

协商缓存由服务器来决定缓存是否可用,所以客户端于服务器要通过某种标识来进行通信,从而让服务器判断请求资源是否使用缓存。只有由 2 组头字段进行标识:Etag / If-None-MatchLast-Modified / If Modified-Since

Etag / If-None-Match

ETag是一个资源的校验码,可以保证每一个资源是唯一的,资源变化会导致Etag变化,服务器根据浏览器上送的If-None-Match的值来判断是否缓存可以。
当服务器返回 304 响应时,Etag重新生成,响应头部还会把这个Etag返回

Last-Modified / If -Modified-Since

浏览器首次请求资源时,服务器响应头会带字段Last-Modified,表示该资源的最后修改时间。当浏览器再次请求资源时,会在请求头的字段带If-Modified-Since,该值就是之前响应的的Last-Modified的值。服务器根据资源的最后修改时间判断是否使用缓存。