一、什么是浏览器缓存
浏览器缓存是一种提升网页加载速度的重要方式，它允许浏览器在本地存储之前请求的网络资源，当在用户再次访问同一个资源时可以直接读取本地缓存的结果。
浏览器缓存的目的是通过减少网络传输和服务器处理时间，显著提高了页面加载速度，并提高了用户体验。
如下图所示，这些结果虽然请求状态为 200，但是是来自缓存
二、浏览器缓存的重要性
- 性能优化：减少网络延迟，提高页面加载速度。
- 降低带宽消耗：避免重复下载相同的资源内容。
- 减轻服务器压力：减少对服务器的请求数量，尤其对于静态资源，缓存能有效分摊服务器负载。
三、浏览器缓存如何实现
- 是否需要浏览器缓存，是由服务端控制，第一次发起请求的时候，服务端在返回头
Response Header里面设置Expires或者Cache-Control字段等，表示这条资源的过期时间或者缓存的持续时间。 - 浏览器根据HTTP响应头中的缓存控制指令来决定是否缓存及何时使用缓存内容。关键头部字段包括：
Cache-Control：用于设置缓存策略，如最大缓存时长（max-age）或禁止缓存（no-cache/no-store）等。Expires：在HTTP 1.0中使用，为缓存资源指定一个绝对过期时间点。ETag和Last-Modified：协商缓存使用的验证信息，用以检查资源是否有更新。
如下图，服务端在返回的 Header 里面设置了 Expires字段，表示该资源被浏览器缓存，并设置了过期时间
四、浏览器缓存类型
浏览器缓存主要分为两大类：强制缓存和协商缓存。
1. 强制缓存
当使用强缓存策略时，浏览器会完全使用本地缓存，强缓存的标志字段是Response Header里携带Cache-Control: max-age=XXX字段，表示资源在XXX秒内有效，或者 Expires 设置过期时间。在此期间浏览器会直接使用缓存中的资源，而不向服务器发送请求
2. 协商缓存
那么协商缓存是怎么使用的呢，当强缓存失效时，就会采用协商缓存，他和强缓存的区别主要就在于一个协商的过程。
- 协商缓存的过程中，第一次请求时，服务器会在请求的 Response Header 设置
Last-Modified或者Etag字段。 - 其中如果设置了 Last-Modified，就是表示这个资源最后被修改的时间，下一次发送这次请求的时候，就会在 request-header 里面携带一个 If-Modified-Since 请求头，来询问服务器这个时间点以来，这条资源是否有更新过，如果没有的话，就直接使用浏览器的缓存。
- 而如果服务器在 Response-Header 里设置了
Etag，就会在下次请求的时候携带一个If-None-Match的请求头，作为资源的标识符向服务器匹配资源，如果说这个 Etag 没有修改的话，就会使用浏览器缓存。
Etag 字段
这个协商的过程主要是浏览器向服务器询问，该资源是否自上次请求以来有所更改。如果服务器回复304 Not Modified状态码，表示资源未变，浏览器继续使用本地缓存；反之则会接收到新的资源数据。
五、强缓存和协商缓存的区别
强缓存：
- 浏览器在加载资源时，根据本地缓存中的信息判断是否可以直接使用。
- 不需要向服务器发送请求验证资源是否过期。
- 如果资源满足缓存条件（如Cache-Control或Expires指示的期限未过），浏览器直接从缓存读取，用户看到的状态码通常是200 OK (from cache)。
协商缓存：
- 当强缓存策略不适用时，浏览器会向服务器发送一个带有验证信息（如If-Modified-Since、If-None-Match）的请求，询问资源是否有更新。
- 服务器根据这些验证信息判断资源是否已更改，并相应地返回内容或者告知浏览器继续使用缓存。
- 如果资源未更新，服务器回复状态码304 Not Modified，浏览器使用本地缓存；若资源有更新，则返回新的资源和状态码200 OK。
六、常见面试考点
面试题2：使用浏览器缓存的时候，不需要向服务器发送请求吗？
不完全是，对于强缓存策略，浏览器确实可以在不需要向服务器发送请求的情况下直接使用本地缓存；而对于协商缓存，则需要向服务器发送验证请求。
面试题1：304 状态码表示什么意思？
304 状态码是在验证协商缓存是否有效的时候，客户端会发送一个资源验证请求，如果资源有效，则服务器会回复状态码304 Not Modified，表示浏览器可以使用本地缓存。否则就会进行新的 http 请求。
