缓存方式
强缓存和协商缓存
强缓存
强缓存在请求一个文件前先检查本地缓存有没有该文件。
- 如果本地文件不存在，直接发送网络请求。
- 如果本地文件存在，但是失效了，直接发送网络请求。
- 如果本地文件存在，并且未失效，直接使用本地缓存的文件，不发送网络请求。
与强缓存有关的请求头主要有两个：
Expires
Expires的值为服务端返回的到期时间，这个时间是一个绝对的时间，如果下一次请求时，请求时间小于服务端返回的到期时间，直接使用缓存数据。
Expires会有一个问题：即时间是由服务端生成的，可能会和客户端的时间有误差，进而导致缓存命中误差。
这个字段只适用于 HTTP 1.0，现在主流浏览器默认使用HTTP 1.1，故该字段不是很重要。
Cache-Control
Cache-Control的值为服务端返回的到期时间，这个时间是一个相对的时间，如果下一次请求时，请求时间小于服务端返回的到期时间，直接使用缓存数据。
canche-control （http1.1）的常见取值 ：
- private 客户端可以缓存
- public 客户端和代理服务器都可缓存
- max-age=xxx 缓存的内容将在 xxx 秒后失效
- no-cache 使用协商缓存来验证缓存是否失效
- no-store 不使用任何缓存（包括强缓存和协商缓存）
协商缓存
如果本地缓存的文件存在，发送一个http协议，询问服务器文件是否失效。
- 如果未失效，服务器返回304状态码，此时返回的响应体中不包含内容。
- 如果失效，服务器返回200状态码，此时返回的响应体中包含新的内容。
与协商缓存有关的请求头主要有两对：
Last-Modified / If-Modified-Since
第一次请求资源时，服务器下发Last-Modified，这个时间是一个绝对时间，表示资源最后修改的时间。
再次请求服务器时，客户端会把Last-Modified的值赋给If-Modified-Since，并发给服务器。
服务器收到请求后发现有头If-Modified-Since 则与被请求资源的最后修改时间进行比对。
若资源的最后修改时间大于If-Modified-Since，说明资源有被改动过，则响应整片资源内容，返回状态码200和新的last-modified，客户端收到响应后更新资源和资源的last-modified并使用最新的资源；
若资源的最后修改时间小于或等于If-Modified-Since，说明资源无最新修改，则响应HTTP 304，浏览器继续使用所保存的cache。
Etag / If-None-Match
第一次请求资源时，服务器下发Etag，这个标识表示当前资源在服务器的唯一标识（生成规则由服务器决定）。
再次请求服务器时，客户端会把Etag的值赋If-None-Match，并发给服务器。
服务器收到请求后发现有头If-None-Match，则与被请求资源的唯一标识进行比对进行比对。
若二者不同，说明资源有被改动过，则响应整片资源内容，返回状态码200和新的Etag，客户端收到响应后更新资源和资源的Etag并使用最新的资源；
若二者相同，说明资源无最新修改，则响应HTTP 304，浏览器继续使用所保存的cache。
推荐阅读
转载于:https://juejin.im/post/5d08998751882546dd10100b