都2023年了，不会还有人不了解浏览器缓存吧。一篇文章带你搞明白浏览器缓存是怎么回事
强缓存、协商缓存
都说缓存分为强缓存和协商缓存，那么什么是强缓存，什么是协商缓存呢。
强缓存是指，当浏览器拿到服务器资源后，本地缓存，并且之后的请求直接走本地资源，不再访问服务器，甚至都不用问是否有更新
协商缓存是指，当浏览器拿到服务器资源后，本地缓存，但是每次都跟服务器确认资源是否过期，过期服务器就返回新的资源给浏览器
强缓存
强缓存通常由http请求头中两个字段控制，Expires（http1.0）和 Cache-Control (http1.1)
Expires 表示资源过期时间（绝对时间），由服务器返回，当浏览器判断超过该时间后，重新请求资源，但是通过修改本地时间，可以让缓存失效
Cache-Control http1.1中引入的新的强缓存控制。通常它包含一个或者过个以下值（多个值逗号分隔）
no-cache 跳过强缓存，可以走协议缓存
no-store 禁止浏览器缓存数据，没有任何缓存，每次都向服务器请求资源
public 可以被代理、CDN和用户缓存
private 只允许被用户缓存，不允许代理、CDN等缓存
max-age=<seconds> 设置缓存的最大存储时间，相对请求的时间
协商缓存
如果浏览器对某个资源的请求没有命中强缓存，就会发起一个请求到服务器，验证协商缓存是否命中，如果命中，请求响应状态304并且会显示一个Not Modified。
协商缓存主要使用
last-modify和if-modify-sinceETag和if-none-match
last-modify 和 if-modify-since
http1.0版本中提出的字段，这两个字段需要配合使用，服务器返回资源时会在响应中添加 last-modify 表示资源最后一次修改时间，浏览器请求资源时会在请求头中包含 if-modify-since 字段（浏览器返回的last-modify的值）。服务器收到请求后判断请求中的if-modify-since和资源修改时间进行匹配，如果不匹配返回新的资源，并且更新 last-modify 字段，如果配置则返回304 Not modified
这两个字段在大多数时候够用，但是存在以下问题
- 文件别修改，但是内容没变化，依然会更新时间
- 文件在1秒内多次修改，无法区分
- 服务器可能无法精确获取文件最后修改时间
ETag 和 if-none-match
在http1.1中为了解决上述问题，新增ETag和if-none-match字段，有ETag字段会忽略last-modify字段。服务器通过设置ETag来设置响应头缓存标识，ETag由服务端生成，在第一次请求资源时，返回资源和ETag，浏览器走协商缓存时，服务器通过判断ETag是否匹配来确定是否返回新的资源和ETag
👉🏻 talk is cheap, show me the code 👈🏻
前往github查看