浏览器的缓存机制

浏览器的缓存机制

1. 强缓存

强缓存是指在缓存期间不需要请求，直接使用缓存数据， 浏览器自己决定用不用缓存。

特点：

• 不请求服务器，直接使用缓存数据
• 如果缓存有效，返回 200 (from memory/disk cache)
• 如果缓存失效，转为协商缓存或重新请求。

开起强缓存方式：

• 设置 Cache-Control: max-age=<缓存时间（单位秒）>
• 设置 Expires<日期>（旧方式，不推荐）

示例：

Cache-Control: max-age=3600 //  # 缓存1小时

浏览器首次请求资源，缓存到内存/磁盘 -> 1 小时内再次请求资源 -> 浏览器直接读缓存，不请求服务器。

2. 协商缓存

协商缓存是指在缓存期间需要请求，由服务器决定是否使用缓存。

特点：

• 请求服务器，由服务器决定是否使用缓存
• 如果资源未变化：服务器返回 304 Not Modified（无响应体），浏览器用缓存。
• 如果资源有变化：服务器返回 200 + 新数据。

开起协商缓存方式：

1. Last-Modified + If-Modified-Since :

浏览器第一次请求资源时，服务器会在响应头中返回 Last-Modified 字段，表示资源的最后修改时间。

浏览器第二次请求资源时，会在请求头中带上 If-Modified-Since 字段，表示上次请求时资源的最后修改时间。

服务器收到请求后，会根据 If-Modified-Since 字段与资源的最后修改时间进行比对，如果相同，则返回 304 Not Modified，浏览器直接使用缓存；如果不同，则返回返回 200 + 新数据。

2. Etag + cache-control: no-cache :

浏览器第一次请求资源时，服务器会在响应头中返回 Etag 字段，表示资源的唯一标识，并且在响应头中设置 cache-control: no-cache。

浏览器第二次请求资源时，会在请求头中带上 If-None-Match 字段，表示上次请求时资源的 Etag。

服务器收到请求后，会根据 If-None-Match 字段与资源的 Etag 进行比对，如果相同，则返回 304 Not Modified，浏览器直接使用缓存；如果不同，则返回返回 200 + 新数据。

3. Etag + Cache-Control: max-age=0, must-revalidate

max-age=0指缓存立即过期 ​ must-revalidate指允许使用缓存，前提是先问服务器。

过程同上。

4. Cache-Control: no-store：

no-store 指不使用任何缓存，每次请求都要向服务器请求， 并且每次都返回 200 + 新数据。

5. 仅用 ETag（无 Cache-Control）:

如果服务器返回 ETag 或 Last-Modified，但没有 Cache-Control，浏览器默认会先使用缓存，再向服务器验证 ​（类似 max-age=0）。

总结：

• 静态数据（图片/css/js） → Cache-Control: max-age=31536000（长期缓存）。
• 动态数据（动态 API 接口、实时数据） → Cache-Control: no-cache + ETag（每次验证）。
• 短缓存动态数据（如新闻数据） → Cache-Control: max-age=60, must-revalidate（过期后验证）。
• 敏感数据（如支付数据） → Cache-Control: no-store（完全不缓存）。
• 旧系统兼容 → 仅 ETag / Last-Modified（可能缓存但会验证）。