浏览器缓存

134 阅读3分钟
  1. 缓存的好处
  • 不用每次都去请求数据,缓解服务器端的压力
  • 提升响应速度,打开本地资源的时间比请求服务器的时间短
  • 减少带宽消耗,使用本地资源使用的网络消耗很少。
  1. 缓存过程

浏览器发起HTTP请求 – 服务器响应该请求。那么浏览器第一次向服务器发起该请求后拿到请求结果,会根据响应报文中HTTP头的缓存标识,决定是否缓存结果,是则将请求结果和缓存标识存入浏览器缓存中。

  1. 缓存位置
  • 内存缓存

每个进程的内存空间,读取响应快,有时效 (tag页面关闭后就没了)

  • 磁盘缓存

缓存存放于硬盘文件中,读取缓存需要进行I/O操作,读取复杂,速度更慢。 例子:

–> 访问https://heyingye.github.io/ –> 200(进行缓存)
–> 关闭博客的标签页
–> 重新打开https://heyingye.github.io/ –> 200(from disk cache)
–> 刷新 –> 200(from memory cache)

4. 缓存标识

**4.1 **强制缓存:状态码返回200

  • expires

HTTP/1.0,其值为服务器返回该请求结果缓存的到期时间,即再次发起该请求时,如果客户端系统时间小于Expires的值时,直接使用缓存结果。【缺点:可能存在时间误差】

  • Cache-control

HTTP/1.1中,优先级高于expires

**4.2 **协商缓存:返回304(协商缓存有效)| 返回200和请求结果(协商缓存失效)

协商缓存就是强制缓存失效后,浏览器携带缓存标识向服务器发起请求,由服务器根据缓存标识决定是否使用缓存的过程。

  • Last-Modified(服务端给出)

服务器响应请求时,返回该资源文件在服务器最后被修改的时间。单位是秒级。

  • If-Modified-Since(客户端携带)

客户端再次发起该请求时,携带上次请求返回的Last-Modified值,通过此字段值告诉服务器该资源上次请求返回的最后被修改时间。

  • Etag(服务端给出)

HTTP/1.1,服务器响应请求时,返回当前资源文件的一个唯一标识(由服务器生成)。解决文件周期性修改,但是内容没有更改的问题。

  • If-None-Match(客户端携带)

携带上次请求返回的唯一标识Etag值,通过此字段值告诉服务器该资源上次请求返回的唯一标识值。服务器收到该请求后,发现该请求头中含有If-None-Match,则会根据If-None-Match的字段值与该资源在服务器的Etag值做对比,一致则返回304,代表资源无更新,继续使用缓存文件;不一致则重新返回资源文件,状态码为200。

注:Etag / If-None-Match优先级高于Last-Modified / If-Modified-Since

5. 整体流程

来源:juejin.cn/post/684490…