协商什么？什么缓存？总之很强

面试官：你懂不懂协商缓存和强缓存？

我：

我：协商什么？什么缓存？

协商缓存和强缓存是浏览器缓存机制中的两种不同方式，它们有助于提高网页加载性能，并减少不必要的网络请求。它们的使用场景也有所不同，根据资源是否频繁变化来选择适合的缓存策略。

1. 强缓存 (Strong Cache)

强缓存是指浏览器在资源未过期的情况下，直接使用本地缓存，而不向服务器发送请求。资源的缓存时间由 HTTP 响应头中的 Cache-Control 和 Expires 字段指定。

工作原理：

• 浏览器第一次请求资源时，服务器会返回资源，并在响应头中设置缓存控制信息（如 Cache-Control 或 Expires）。
• 当缓存时间未过期时，浏览器不会再次向服务器发起请求，而是直接从本地缓存中读取资源。

关键字段：

• Cache-Control: max-age=<seconds>：指定资源可以在缓存中存储的最大时间（单位：秒）。例如，Cache-Control: max-age=3600 表示该资源可以在缓存中保存 1 小时。
• Expires：设置资源的过期时间，过期后缓存会被认为是失效的。

使用场景：

• 静态资源：如图片、字体、CSS、JavaScript 等，这些资源一般不常变动，可以长时间缓存。
• CDN资源：大多数CDN加速的资源，比如图片、视频等，可以设置较长的强缓存时间，减少重复请求。

2. 协商缓存 (Conditional Cache)

协商缓存是一种浏览器与服务器之间的缓存验证机制。当强缓存过期或不存在时，浏览器会向服务器发送带有缓存信息的请求，服务器根据这些信息判断资源是否发生了变化。如果资源未改变，服务器会返回 304 Not Modified，让浏览器继续使用本地缓存。

工作原理：

1. 浏览器第一次请求资源时，服务器会返回资源，并附带 Last-Modified 或 ETag 信息。
2. 当浏览器再次请求相同资源时，会在请求头中携带 If-Modified-Since（与 Last-Modified 关联）或 If-None-Match（与 ETag 关联）。
3. 服务器根据这些信息判断资源是否有更新。如果没有变化，服务器返回 304 Not Modified，浏览器继续使用本地缓存；如果有变化，服务器返回新的资源。

关键字段：

• Last-Modified：资源最后修改的时间。
• If-Modified-Since：客户端请求时携带的字段，表示资源的最后修改时间，服务器会将其与当前资源的修改时间比较。
• ETag：为每个资源生成一个唯一的标识符（通常是资源内容的哈希值），用于验证资源是否有变化。
• If-None-Match：客户端请求时携带的字段，表示资源的 ETag，服务器将其与当前资源的 ETag 进行比较。

使用场景：

• 动态资源：如 API 接口请求、用户个人化内容、带有时间戳的文件等，这些资源可能会频繁更新。
• 频繁变化的资源：例如新闻网站、社交媒体内容、实时数据等，这类资源内容经常变化，协商缓存可以帮助在不重新下载资源的情况下获取最新版本。

强缓存与协商缓存的区别

特点	强缓存 (Strong Cache)	协商缓存 (Conditional Cache)
缓存方式	不向服务器发送请求，直接使用缓存	向服务器发送请求，使用 Last-Modified 或 ETag 验证缓存
请求行为	没有请求，直接使用缓存内容	发送请求，并根据服务器的响应决定是否使用缓存
优势	更快，因为不需要与服务器交互	确保资源始终是最新的
响应状态	无需服务器响应，直接使用缓存	如果缓存未修改，服务器返回 304 Not Modified
使用场景	适用于静态资源（如图片、字体文件等）	适用于动态资源（如 API 请求，内容频繁变化的页面）

总结

• 强缓存：适用于不常改变的静态资源，比如图片、字体、视频等，通过设置过期时间来避免频繁的请求，提高页面加载速度。
• 协商缓存：适用于内容经常变化的资源，比如 API 接口、用户数据等，能够保证资源的最新性，并在不重新下载的情况下减少网络带宽消耗。