浏览器强缓存与协商缓存

首先缓存的优点：

1. 减少请求次数
2. 减少了冗余的数据传输，节省网费
3. 减少服务器的负担，提升网站性能
4. 加快了客户端加载网页的速度

强缓存

主要看response headers中Cache-Control的值
Cache-Control取值含义：
private：仅浏览器可以缓存
public：浏览器和代理服务器都可以缓存
max-age=xxx 过期时间（秒）
no-cache：不进行强缓存
no-store：不强缓存也不协商缓存

协商缓存

f2c1faca83514b82885fa5958dfff8bc.png

触发条件：
1、Cache-Control的值为no-cache（不强缓存）
2、max-age 设置的时间导致文件过期了

协商缓存相关规则：

ETag：每个文件都有一个，改动文件就会变（类似md5）
Etag是服务器自动生成或者由开发者生成的对应资源在服务器端的唯一标识符。
Last-Modified：文件修改时间

每次http返回来response headers中都会带ETag和Last-Modefied ，下次请求时在request header就把这两个给带上但是名字有了变化（ETag->If-None-Match，Last-Modified->If-Modified-Since），服务端把带过来的标识与之前的标识进行对比 判断是否更改过了

7602ac469e094e4e8caff6ac1d25f15f.png

f6a72e4c4f834375a8d0079c2254240f.png

协商缓存步骤总结：

请求资源时，把用户本地该资源的 ETag 同时带到服务端，服务端和最新资源做对比。
如果资源没更改，返回304，浏览器读取本地缓存。
如果资源有更改，返回200，返回最新的资源。

如何查看是否命中缓存？

1.从服务器获取新的资源
2.命中强缓存，且资源没过期，直接读取本地缓存（请求成功 文件大小size会显示 from disk cache）
3.命中协商缓存，且资源未更改，读取本地缓存。
注意：协商缓存无论如果，都要向服务端发请求的，只不过，资源未更改时，返回的只是header信息，所以size很小；而资源有更改时，还要返回body数据，所以size会大。

怎么配置资源的缓存规则？

可以有后端服务器配置，也可以在nginx中配置

a00c0fa60acd47d7a472755012533ff1.png

82fe0440e09e4f36ba09a65dd07f7827.png

总结

2c5548e48f6a4d9aa9b1b36ae1cfb57d.png

bf0cb32545b64490936e67453436d7c9.png

参考链接：https://blog.csdn.net/Amnesiac666/article/details/121101165

疑问1：max-age时间是怎么来的 从什么时候开始计时
疑问2：为什么是response header中的而不是request header中