本文已参与[新人创作礼]活动，一起开启掘金创作之路。
浏览器缓存分类
浏览器缓存分为强缓存和协商缓存，浏览器加载一个页面的简单流程如下：
1.浏览器先根据这个资源的http头信息来判断是否命中强缓存。如果命中则直接加在缓存中的资源，并不会将请求发送到服务器。(强缓存)
2.如果未命中强缓存，则浏览器会将资源加载请求发送到服务器、服务器来判断浏览器本地缓存是否失效。若可以使用，则服务器并不会返回资源信息，浏览器继续从缓存加载资源（协商缓存）
3.如果未命中协商缓存，则服务器将完整的资源返回给浏览器，浏览器加载新资源，并更新缓存。（新的请求）
强缓存
命中强缓存时，浏览器并不会将请求发送给服务器。在开发者工具可以看到Http的返回码是200，但是在Size列会显示为（from cache）
强缓存是利用http的返回头中的Expires或者Cach-Control俩个字段来控制的，用来表示资源的缓存时间。
Expires
缓存过期时间，用来指定资源到期的时间，是服务器端的具体的时间点。也就是说，Expires=max-age+请求时间，需要和Last-modified结合使用。但在上面我们提高过，cache-control的优先级更高。Expires是Web服务器响应消息头字段，在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存存取数据，而无需再次请求。
该字段会返回一个时间，比如Expires:Thu.31 Dec 2037 23：12：51 GMT。这个时间代表着这个资源的失效时间，也就是说在2037年12月31日23点12分51秒前都是有效的。这种方式有一个明显的缺点，由于失效时间是一个绝对时间，所以当客户端本地时间被修改了以后，服务器与客户端时间偏差变大以后，就会导致缓存混乱。于是发展出了 Cache-Control。
Cache-Control
Cache-Control是一个相对时间，例如Cahe-Control:3600,代表着资源的有效期是3600秒。由于是相对时间，并且都是与客户端时间比较，所以服务器与客户端时间偏差也不会导致问题。
Cache-Control与Expires可以在服务端配置同时启用或者启用任意一个，同时启用时Cache-Control优先级更高。
Cache-Control可以由多个字段组合而成，主要以下几个取值：
1.max-age 指定一个时间长度，在这个时间段内缓存是有效的，单位是S。例如设置Cache-Control:max-age=31536000。
协商缓存
若未命中强缓存，则浏览器会将请求发送至服务器。服务器根 据http头信息中的Last-Modify/if-Modify-Since或Etag/If-None-Match来判断是否命中协商缓存。如果命中，则http返回码未304，浏览器从缓存中加载资源。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8pekkq3x-1608825611150)(C:\Users\包大人\AppData\Roaming\Typora\typora-user-images\image-20201213184059235.png)]
Last-Modified 和 If-Modified-Since
浏览器第一次请求一个资源的时候，服务器返回的header中会加入Last-Modify，指的是一个时间标识该资源的最后修改时间
当浏览器再次请求该资源时，发送的请求头会包含if-Modify-Since,该值为缓存之前返回的Last-Modify。服务器收到if-Modify-Since后，根据资源的最后修改时间判断是否命中缓存。
如果命中缓存，则返回Http304，并且不会返回资源内容，并且不会返回last-modify。
缺点：精度在1s，没法更加精确
ETage/If-None-Match
与Last-Modify/if-Modify-Since不同的是，Etag/if-None-Match返回的一个校验码。ETag可以保证每一个资源是唯一的，资源变化都会导致ETag变化。ETag值得变更则说明资源状态已将被修改。服务器根据浏览器上发送得If-None-Match值来判断是否命中缓存。
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-51X7CjKf-1608825611153)(C:\Users\包大人\AppData\Roaming\Typora\typora-user-images\image-20201213190839009.png)]
总结：
http缓存能够帮助服务器提高并发性，很多资源不需要重复请求直接从浏览器缓存中拿。
htttp 缓存分类： 强缓存 协商缓存
强缓存通过 expires 和 cache-control控制 协商缓存 通过 last-modify 和 E-tag控制
补充：
1.为什么有expires 还需要cache-control呢？
因为expires 有个服务器和浏览器时间不同步得问题
expires 是绝对时间 cache-control是相对时间
2. last-modify和ETag
1. last-modify 他有精度问题只能到秒
2. e-tag 没有精度问题 只要文件改变 e-tag值就改变
