http图片缓存机制

‘壹’ 前端http请求细节——Cache-Control（缓存机制）

请求和响应中的 Cache-Control 指令并不完全相同，具体可以查看 这里 ，包括指令的具体意思，这里不过多赘述。（默认值：private）

浏览器的缓存机制是根据 HTTP 报文的缓存标识进行的，浏览器第一次向服务器发起该请求后拿到请求结果，会根据响应报文中 HTTP 头的缓存标识，决定是否缓存结果。
浏览器缓存策略分为两种：强制缓存和协商缓存。

强制缓存不会向服务器发送请求，直接从缓存中读取资源，可以看到请求返回的状态码都是200，并且 Size 代表该缓存的位置。

浏览器读取缓存的顺序为memory –> disk。

三级缓存原理 (访问缓存优先级)：

在浏览器中，浏览器会在js，字体，图片等文件解析执行后直接存入内存缓存中，那么当刷新页面时只需直接从内存缓存中读取(from memory cache)；而css文件则会存入硬盘文件中，所以每次渲染页面都需要从硬盘读取缓存(from disk cache)。

为什么CSS会放在硬盘缓存中？
因为CSS文件加载一次就可渲染出来,我们不会频繁读取它,所以它不适合缓存到内存中,但是js之类的脚本却随时可能会执行,如果脚本在磁盘当中,我们在执行脚本的时候需要从磁盘取到内存中来,这样IO开销就很大了,有可能导致浏览器失去响应。

若服务器的资源最后被修改时间 > If-Modified-Since的字段值
则重新返回资源，状态码为200；否则则返回304，代表资源无更新，可继续使用缓存文件

If-None-Match 的字段值 = 该资源在服务器的Etag值
一致则返回304，代表资源无更新，继续使用缓存文件；不一致则重新返回资源文件，状态码为200。

ETag 和 Last-Modified 区别

参考链接：
https://juejin.im/entry/5ad86c16f265da505a77dca4
https://www.cnblogs.com/suihang/p/12855345.html
https://www.jianshu.com/p/54cc04190252

‘贰’ 在HTTP中，我们可以通过设置响应头中的哪些参数来设定缓存

在HTTP中，我们可以通过设置响应头中的“Cache-Control”和“Expires”字段来设定缓存的过期时间。
详细解释：
HTTP（超文本传输协议）中的缓存机制是用于在网络中减少不必要的数据传输，提高网络应用的性能。当我们访问一个网页时，HTTP缓存可以存储网页的数据，当再次访问该网页时，如果缓存中的数据未过期，浏览器就会直接从缓存中读取数据，而不是从服务器重新下载。
设置缓存的过期时间是通过在HTTP响应头中设定“Cache-Control”和“Expires”字段来实现的。其中，“Cache-Control”字段用于定义缓存行为，它可以设定多个值，如“public”、“private”、“no-cache”、“max-age”等。“Expires”字段则用于设定缓存的过期日期和时间。
例如，如果我们希望一个资源在客户端的缓存中保留一天，我们可以在响应头中设定“Cache-Control: max-age=86400”。这表示该资源在缓存中的最大有效时间为86400秒（即24小时）。当超过这个时间后，缓存的资源就会被认为过期，浏览器需要重新从服务器下载该资源。
同时，我们也可以使用“Expires”字段来设定缓存的过期时间。它的值是一个日期和时间，表示在这个时间之后，缓存的资源就会过期。例如，“Expires: Wed, 21 Jul 2023 10:00:00 GMT”表示该资源将在2023年7月21日10:00 GMT后过期。
需要注意的是，“Cache-Control”和“Expires”字段并不能保证缓存一定有效。它们只是给浏览器提供一个建议，实际的缓存行为还会受到浏览器自身的缓存策略，用户的网络环境等多种因素影响。因此，在设定缓存策略时，我们需要充分考虑到这些因素，以确保我们的应用能在各种网络环境下都能正常工作。