浏览器缓存

优势：

1. 减少冗余数据传输

2. 减少服务器负担，大大提示网站的性能

3. 加快了客户端加载网页的速度

分类

一、强缓存

只要  浏览器  判断  缓存  没有过期，则直接使用浏览器的本地缓存

【不会向服务器发送请求，直接从缓存中读取资源】

Expires

1. http 1.0 中定义的缓存字段，指缓存过期的绝对时间，即在此时间之后，响应资源过期

Cache-Control

1. http 1.1 中定义的缓存字段，用于控制缓存行为，可组合使用多个指令

max-age；缓存过期的相对时间，单位为秒数。当其与 Expires 同时出现时，max-age 的优先级更高。但往往为了做向下兼容，两者都会经常出现在响应首部中。同时 max-age 还可在请求首部中被使用，告知服务器客户端希望接收一个存在时间（age）不大于多少秒的资源

s-maxage；决定了代理服务器缓存的时长，必须和 public 属性一起使用才能起到作用。

public/private；决定资源是否可以在代理服务器进行缓存，其中，public 表示资源在客户端和代理服务器都可以被缓存，private 表示资源只能在客户端被缓存，拒绝资源在代理服务器缓存。默认值为 private。

no-cache；表示强制进行协商缓存，如果某一资源的Cache-control中设置了no-cache，那么该资源会直接跳过强缓存的校验，直接去服务器进行协商缓存。

no-store；表示禁止任何缓存策略。

二、协商缓存

在使用本地缓存之前，向服务器发送请求，服务器根据请求的request header的一些参数来判断是否命中协商缓存，若命中，则返回304 状态码并带上新的response header 通知浏览器从缓存中读取资源

【协商缓存可以解决强制缓存的情况下，资源不更新问题】

设置协商缓存：

cache-control：-no-cache(不强制缓存)

Last-Modified 和 If-Modified-Since

Last-Modified 代表资源的最后修改时间。当浏览器第一次接收到服务器返回资源的 Last-Modified 值后，其会把这个值存储起来，并再下次访问该资源时通过携带 If-Modified-Since 请求首部发送给服务器验证该资源有没有过期

如果在 If-Modified-Since 字段指定的时间之后资源发生了更新，

1. 服务器会将更新的资源发送给浏览器（状态码200）并返回最新的 Last-Modified 值，

2. 浏览器收到资源后会更新缓存的 If-Modified-Since 的值。

如果在 If-Modified-Since 字段指定的时间之后资源都没有发生更新，

1. 服务器会返回状态码 304 Not Modified 的响应，即命中协商缓存。

虽然起到了缓存作用，但是还是有一定缺陷的

Etag和If-None-Match （Etag是资源文件对应的hash值，但是会加大服务器的开销）

Etag表示资源的唯一性标识；服务器会生成Etag，当资源发生变化时，Etag标识更新，浏览器第一次收到时会存储Etag，并在下次访问资源时携带If-None-Match请求首部发送给服务器验证该资源有没有过期。

如果服务器发现 If-None-Match 值与 Etag 不一致时，

说明服务器上的文件已经被更新，那么服务器会发送更新后的资源给浏览器并返回最新的 Etag 值，浏览器收到资源后会更新缓存的 If-None-Match 的值。

如果服务器发现 If-None-Match 值与 Etag 一致，说明服务器上的文件未更新，

那么服务器会返回状态码 304 Not Modified 的响应，即命中协商缓存。

协商缓存流程图

参考文章：

前端缓存及性能优化 - 知乎