强缓存和协商缓存概念

缓存的概念：浏览器缓存就是浏览器对之前访问请求过的文件进行缓存，以便下次访问时重复向服务器再次请求访问，节省带宽，提高访问速度，给服务器减少压力。

1、强缓存：浏览器不会向服务器发送请求，而是直接从本地缓存中读取文件数据

  1. 协商缓存：向服务器发送请求，同时服务器最新资源 ETag 和本地资源的 ETag 和 Last-Modified 比较，两种情况：
    • 如果资源已经被更新，返回 200 状态码，浏览器获取最新的服务器资源
    • 如果资源没有更新，返回304状态码，浏览器读取本地资源

有关缓存的 header 字段信息

可观察以上图：

  1. status code（状态码）
  • 强缓存：200（from cache）
  • 协议缓存 304（not modified） 200

  1. 强缓存:

    由 Expires(到期时间)或者 Cache-Control（缓存控制时间，优先级高于 Expires） 这两个字短来控制的

  • Expires 为 GMT 格式的时间字符串 代表缓存过期失效时间

  • Cache-Control 主要是利用”max-age”来判断缓存过期时间（例如 Cache-Control:max-age=31536000 代表资源有效期为 31536000 秒），还有下面几个比较常用的几个设置值

    • no-cache:不使用本地缓存，需要用协商缓存
    • no-store :直接禁止强缓存，每次用户访问都是去向服务器发送请求
    • public：可以被所有用户缓存
    • private：只能被终端用户缓存
  1. 协商缓存

  • 第一次请求 请求头上会带上Last-Modified或者Etag字段

  • 后续请求 请求头上If-Modified-Since或者If-None-Match字段

  • Last-Modified/If-Modified-Since：
    1）. 浏览器第一次发送请求，让服务端在 response header 中返回请求的资源上次更新时间（Last-Modified 的值），浏览器会存下这个时间；

    2）当浏览器下次请求时，request header 中带上 If-Modified-Since(即保存的 Last-Modified 的值)。根据浏览器发送的修改时间和服务端的 wh 修改时间进行比对，一致的话代码资源没有改变，服务端返回正文为空的响应，让浏览器在缓存中读取资源，从而减少请求消耗。

    缺点：Last-Modified精确到秒，如果这个时候，我们一秒内更改了多次文件，那就无法识别了

  • ETag/If-None-Match:

    发送请求步骤：

    1） 浏览器第一次发送请求得到 Etag 的值，然后爱下一次的请求后 request header 中带上 If-none-match（就是 Etag 保存的值）

    2）通过发送的 ETag 的值和服务器重新生成的 ETag 的值进行比对，如果一致代表资源没有改变，服务器返回的正文为空的响应，让浏览器从缓存中读取资源，从而减少请求消耗。

    Etag工作机制和last-modified基本一样，但Etag解决了last-modified缺点问题，Etag是使用最近修改时间戳的哈希值，具体怎么个运行机制，这点上我还没弄懂。

    缺点：要进行读写操作，所以消耗更大一些，性能比较低。last-modified只需要读取操作

    服务器会优先验证Etag，一致的情况下，才会继续比对Last-Modified，最后才决定是否返回304。

总结

协商缓存受强缓存的影响，强缓存过期了且Cache-Control不为no-store时，是否缓存的问题才由协商缓存决定