强缓存与协商缓存

1、强缓存也叫本地缓存，状态码200，直接缓存到本地，不与服务器通信

header:Expires/Cache-Control

2、协商缓存：状态码304.会将一些资源信息返回给服务端，让服务端判断是否可以直接使用本地缓存，整个过程至少与服务器通信一次。

header:Last-Modified/Etag

,public,immutable

cache-control:max-age=43200, 最大缓存时间，强缓存

public 强缓存 每次用户正常打开这个页面，浏览器会判断缓存是否过期，没有过期就从缓存中读取数据

public,immutable ：就算用户刷新页面，浏览器也不会发起请求去服务，浏览器会直接从本地磁盘或者内存中读取缓存并返回200状态

强缓存总结

1. cache-control: max-age=xxxx，public
   客户端和代理服务器都可以缓存该资源；
   客户端在n秒的有效期内，如果有请求该资源的需求的话就直接读取缓存,statu code:200 ，如果用户做了刷新操作，就向服务器发起http请求

2. cache-control: max-age=xxxx，private
   只让客户端可以缓存该资源；代理服务器不缓存
   客户端在n秒内直接读取缓存,statu code:200

3. cache-control: max-age=xxxx，immutable
   客户端在n秒的有效期内，如果有请求该资源的需求的话就直接读取缓存,statu code:200 ，即使用户做了刷新操作，也不向服务器发起http请求

4. cache-control: no-cache
   跳过设置强缓存，但是不妨碍设置协商缓存；一般如果你做了强缓存，只有在强缓存失效了才走协商缓存的，设置了no-cache就不会走强缓存了，每次请求都回询问服务端。

5. cache-control: no-store
   不缓存，这个会让客户端、服务器都不缓存，也就没有所谓的强缓存、协商缓存了。

private： 仅浏览器可以缓存

public： 浏览器和代理服务器都可以缓存（对于private和public，前端可以认为一样，不用深究）

max-age=xxx 过期时间（重要）

no-cache 不进行强缓存（重要）

no-store 不强缓存，也不协商缓存，基本不用，缓存越多才越好呢

这个图，虽然强缓存命中，但是也有 ETag 和 Last-Modified ，这两个就是协商缓存的相关规则。

ETag：每个文件有一个，改动文件了就变了，可以看似md5

Last-Modified：文件的修改时间

缓存结果:

 

用户行为对缓存的影响：

即：F5 会 跳过强缓存规则，直接走协商缓存；；；Ctrl+F5 ，跳过所有缓存规则，和第一次请求一样，重新获取资源 

 

 

参考文章：彻底弄懂强缓存与协商缓存 - 简书 (jianshu.com)