浏览器的缓存机制

强制缓存
协商缓存

浏览器第一次向服务器发送请求会拿到请求结果，会根据响应报文中HTTP头的缓存标识，决定是否缓存结果，是则将请求结果和缓存标识存入浏览器缓存中，简单的过程如下图：

由下图我们可以知道：

浏览器每次发起请求，都会先在浏览器缓存中查找该请求的结果以及缓存标识
浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器的缓存中

以上两点就是浏览器缓存机制的关键

浏览器缓存机制的关键是什么？

1、浏览器每次发起请求，都会先在浏览器缓存中查找该请求的结果以及缓存标识 2、浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器的缓存中

强缓存与协商缓存发生在那里阶段？

发生在浏览器重新发起HTTP请求的过程，不是第一次HTTP请求。

强制缓存

强制缓存就是向浏览器缓存查找该请求结果，并根据该结果的缓存规则来决定是否使用该缓存结果 当浏览器向服务器发起请求时，服务器会将缓存规则放入HTTP响应报文的HTTP头部和请求结果一起返回给浏览器，控制强制缓存的字段分别使 Expires 和 Cache-Control ，其中 Cache-Control 的优先级比 Expires 高。

请求如果没有命中浏览器缓存，就直接向服务器发送请求
请求如果命中浏览器缓存则检查缓存规则是否失效，失效则使用 协商缓存
请求如果命中浏览器缓存则检查缓存规则是否失效，没有失效则直接返回结果

协商缓存

协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存

协商缓存的标识也是在响应报文的HTTP头中和请求结果一起返回给浏览器，控制协商缓存的字段分别由： Last-Modified / If-Modified-Since 和 Etag / If-None-Match ,其中 Etag / If-None-Match 的优先级要比 Last-Modified / If-Modified-Since 高。

协商缓存生效，返回304
协商缓存不生效，返回200和请求结果

Expires 与 Cache-Control 区别

1、Cache-Control 优先级比 Expires 高

2、Cache-Control是相对时间（相对于响应返回的时间），比如一个请求响应报文头部是 2022-03-03 00:00:00， Cache-Control就是相对于这个时间。

Cache-Control: max-age: 54854; // 秒
Cache-Control: no-storel // 不管怎么都不缓存
Cache-Control: no-cache // 网上有很多人说这个字段是不缓存资源，这是错误的，不缓存资源的字段是no-store，只不过在访问该资源的时候，首先要用Last-Modified或Etag首部重新验证响应的状态，而不是先检查本地缓存是否过期。

3、Expires以日期时间的形式返回给客户端，弊端是和电脑时间比较的，电脑时间有问题就会导致漏洞。

Last-Modified和Etag

当请求到达服务器时，服务器会比较If-Modified-Since与资源最后修改时间，若If-Modified-Since比最后修改时间还早，那么返回200响应，并将资源放在响应实体中；否则，返回304响应，响应实体为空，可以重复利用以前的缓存。

Etag:与Last-Modified的作用类似，只不过它是资源的唯一标识符，在资源改变时，Etag也会发生改变。请求首部与其对应的首部是If-None-Match。

Last-Modified 是最后修改时间，Etag 是唯一标识符
Etag 的优先级高于 Last-Modified

面试必问-浏览器的缓存机制

浏览器的缓存机制