前端提缓存策略的话，无非就是浏览器对资源的缓存。HTTP缓存策略只是为了解决客户端和服务端信息不对称的问题而存在的，客户端为了加快速度会缓存部分资源，但是下次请求时，客户端不知道这个资源有没有更新，服务端也不知道客户端缓存的是哪个版本，不知道该不该再返回资源，其实就是一个信息同步问题，HTTP缓存策略就是来解决这个问题的。
缓存示意图
- 大致流程
- 浏览器第一次请求的时候，本地如果没什么缓存都没有。会先加载资源，缓存到本地。
- 第二次请求的时候，浏览器很具这个资源的http头信息来判断是否缓存过期（强缓存）。如果没有过期（有强缓存，也可以使用强缓存）就直接拿本地缓存，不会发送请求。
- 如果没有强缓存，或者强缓存已经过期，进入协商缓存，浏览器和服务器去协商当前缓存是否可以用。
- 协商缓存是，浏览器会把资源请求发送给到服务器，服务器来判断浏览器缓存是否是可用。如果服务器匹配上，返回304，告诉浏览器，是可以使用的。浏览器拿到这个状态，继续从缓存加载资源。
- 如果未命中协商缓存，服务器和浏览器没有匹配上，那就返回最新的资源给到浏览器，并更新缓存。
强缓存
- 看是否是强缓存，statue是否是200，并且资源是否from memory cache/disk cache。如果是基本上可以定位是强缓存。
- 强缓存有两个关键字段，expires和cache-control两个字段控制。
- expires是绝对时间，cache-control是相对时间。之所以有了expires，还要出cache-control字段，是因为有可能服务器和本地的时间是不一致的，因此需要后面cache-control：max-age=10，如果等于10，代表10s以后，就失效。如下图，这个就是一个强缓存。
image.png
协商缓存
- 如果匹配不到强缓存，这时候就需要请求服务器，需要服务器来判断当前浏览器的缓存是否有效。
- 协商缓存有etag和last-modified两个字段。
- last-modified相对应的有一个 if-modified-since属性，if-modified-since是客户端发起的，把上次服务器返回的last-modified的值带上，一起发送给服务器，交由服务器去判断这个 缓存是否可以。
- etag相对应if-none-match属性，if-none-match和上面的道理一样，是客户端发起，把上次服务器返回的etag带上，一起发送给服务器。
- 由于last-modified的时间没办法精确到毫秒，所有会有一些时间上的误差，因此etag的优先级是最高的，etag可以理解为git提交的版本号一样，是独一无二的，只有资源修改了，才会生成一个tag出来。
image.png
image.png
