前言
强缓存
HTTP头部字段
- Cache-Control
Cache-Control是 HTTP/1.1 中定义的缓存控制头，它有多个指令。例如，max-age指令指定了资源可以被缓存的最大时间（以秒为单位）。如Cache-Control: max-age=3600表示资源在本地缓存中可以保存 1 小时，在这 1 小时内，浏览器对该资源的请求都直接从本地缓存读取，不会和服务器进行通信
😎其中有个很有意思的指令：no-cache💥
- 不是不缓存，而是每次重新调用的时候要检查是否资源有更新~
要设置每次请求的资源是最新的应该使用no-store😉
- Expires（响应头字段）
Expires是 HTTP/1.0 中使用的字段，它的值是一个绝对时间，例如Expires: Wed, 21 Oct 2024 07:28:00 GMT。浏览器会将这个时间和当前时间进行比较，如果当前时间小于Expires指定的时间，就直接使用本地缓存的资源。
缺点：
Expires的问题在于它依赖于服务器和客户端的时间，如果时间不同步，可能会导致缓存失效不准确的情况
优先级
Cache-Control > Expires
总结
- 优点
可以极大地减少服务器的压力，提高网站的性能。因为浏览器直接从本地获取资源，不需要每次都请求服务器，节省了网络传输时间
- 缺点
如果资源更新了，在强缓存有效期内，用户可能无法获取到最新的资源，导致显示的内容不是最新的
协商缓存
HTTP头部字段
- Last-Modified / If-Modified-Since
服务器在响应资源时，会在头部添加Last-Modified字段，其值是资源最后修改的时间。例如Last-Modified: Tue, 15 Oct 2024 10:30:00 GMT。当浏览器再次请求该资源时，会在请求头中带上If-Modified-Since字段，其值就是之前服务器返回的Last-Modified的值。服务器收到请求后，会比较资源最后修改的时间和If-Modified-Since的值。如果资源没有被修改，服务器会返回 304 状态码，告诉浏览器可以使用本地缓存的资源；如果资源已经被修改，服务器会返回 200 状态码，并把新的资源发送给浏览器
- ETag / If-None-Match
ETag（实体标签）是服务器为每个资源生成的一个唯一标识符，它可以是根据资源内容生成的哈希值等。例如，服务器返回的ETag值为5d8c7e-1234abcd。当浏览器再次请求资源时，会在请求头中带上If-None-Match字段，其值为之前服务器返回的ETag值。服务器收到请求后，会比较ETag的值，如果相同，返回 304 状态码，允许浏览器使用本地缓存；如果不同，返回 200 状态码并发送新的资源。
优势：ETag比Last-Modified更加准确，因为它是基于资源内容生成的，即使文件的修改时间相同，但内容发生了变化，ETag也会不同
总结
- 优点
在保证性能的同时，可以让浏览器及时获取到更新后的资源。当资源有更新时，能够准确地获取新资源
- 缺点
相比强缓存，每次都需要和服务器进行协商，会产生一定的网络开销，虽然 304 状态码的响应体为空，但请求和响应的头部信息还是需要传输的
