浏览器缓存的作用
浏览器缓存是HTTP的缓存机制中的一种，其原理实现是通过发送HTTP请求时在请求头里面配置一些标识，此时HTTP通过标识能够分析出是否使用缓存内容。在请求时使用浏览器缓存可以减少网络带宽消耗，降低服务器压力，更快的响应结果。 **
强缓存与协商缓存
浏览器的缓存机制分为两类**「强缓存」和「协商缓存」**
- **强缓存：**简单来说就是在请求时可以直接在缓存中获取数据，不经过服务器
- **协商缓存：**如果强缓存失效时，浏览器不知道缓存的数据是否是最新的，所以要经过服务器判断后告诉浏览器缓存是否可用。
浏览器是如何当前请求是否要使用缓存内容呢？我们上文也提到过通过HTTP请求头。接下来就详细的说一下强缓存和协商缓存是通过什么请求头控制的。
强缓存
强缓存的控制字段
- Expires (HTTP1.0)
- Cache-Control(HTTP1.1)
当浏览器发送请求至服务器时，服务器在响应结果的同时会把缓存规则放在HTTP响应报文中一并返回给浏览器。其中Cache-Control的优先级要高于Expires。
Expires
这个字段是HTTP1.0时缓存规则字段，他的值是服务返回缓存失效的到期时间，也就是说再次发送请求如果当前时间小于Expires设置的时间，那么就是用当前缓存内容。
Expires 是HTTP1.0时的字段，在HTTP1.1时就不再使用这个字段，是因为这个字段存在着一些问题，Expires 存的是服务返回的时间，而在请求时这个时间要和客户端的时间进行对比，如果时区不同或者一些别的原因，会导致在有效时间段内判断失误，则缓存没有任何作用。所以在HTTP1.1时采用Cache-Control 字段来判断。
Cache-Control
Cache-Control有几个取值
- **public：**所有内容都被缓存
- **private：**所有内容只能客户端缓存，Cache-Control 的默认取值
- **no-cache：**客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定
- **no-store：**所有内容都不会缓存
- **max-age：**缓存内容在多少秒后失效，常用的一个配置
max-age 是一个相对时间，单位是秒，也就是说在max-age秒内再次发起该请求，则会直接使用缓存结果，强制缓存生效。
协商缓存
协商缓存的控制字段有四个，都是成对出现的
- Last-Moditifed/If-Moditifed-Since
- Etag/If-Nont-Match
协商缓存在强缓存失效后，请求是携带协商缓存的请求头，有服务器根据请求标识判断决定是否使用缓存。与强缓存一样，协商缓存的标识也是在服务器响应后与请求结果和响应报文一同返回给浏览器。
Last-Moditifed/If-Moditifed-Since
Last-Moditifed 是服务器返回数据最后修改的时间。 If-Moditifed-Since 则是发起请求时，请求头携带服务器返回的Last-Moditifed的时间，服务器发现请求头里面有If-Moditifed-Since字段就会根据他携带的时间与数据在服务器最后修改的时间进行对比。如果小于最后修改时间，则实用缓存内容。状态码为304，代表数据无更新，继续使用缓存文件，如果大于最后修改时间，则使用最新数据，状态码为200，表示数据更新，同时会更新响应字段的Last-Moditifed时间。
这个和强缓存Expires 字段有点类似，Expires 时客户端时间与服务器时间进行对比，而If-Moditifed-Since 的时间对比都是服务器时间。
Etag/If-Nont-Match
使用Last-Moditifed对比修改时间，只能把时间精确到秒，所以在服务器比较数据是否被修改也是有问题的，所以在HTTP1.1提出了Etag字段，这个字段也是服务返回的，但是返回的内容并不是时间，而是表示数据的一个唯一标识，有服务器计算得出，再次发起该请求时，会在If-Nont-Match请求头上面携带服务器返回的唯一标识。发送给服务器，服务器通过该字段进行对比判断数据是否被修改。如果唯一标识一致，则返回304状态码，代表数据无更新，继续使用缓存文件，如果唯一标识不一致则返回200状态码，表示数据更新，同时会更新响应字段的Etag字段标识。
同样的，Etag/If-Nont-Match 的优先级要高于 Last-Moditifed/If-Moditifed-Since
**
总结一下
以上就是浏览器缓存机制的基本内容，强缓存要优先于协商缓存，如果强缓存生效，则直接使用缓存内容，如果强缓存失效，则会使用协商缓存，让服务器判断缓存内容是否可用。如果协商缓存也失效，则会重新获取数据，状态码为200，如果缓存没有失效，则使用缓存数据，状态码为304。整体流程如下所示
