服务器缓存与浏览器缓存详解

一、浏览器缓存

1. 基本概念

浏览器缓存是指浏览器将请求过的资源（HTML、CSS、JS、图片等）存储在本地磁盘中，当用户再次访问相同资源时，可以直接从本地加载而无需从服务器重新请求。

2. 缓存机制

浏览器缓存主要通过HTTP响应头控制：

(1) 强缓存（无需向服务器验证）

Expires：

Expires: Wed, 21 Oct 2025 07:28:00 GMT

HTTP/1.0的规范，指定资源的绝对过期时间问题：依赖客户端时间，可能不准确 Cache-Control：

Cache-Control: max-age=31536000

HTTP/1.1的规范，优先级高于Expires常用指令：

max-age：缓存最大有效时间（秒）no-cache：不使用强缓存，需向服务器验证no-store：完全不缓存public：可被任何中间节点缓存private：仅浏览器可缓存

(2) 协商缓存（需向服务器验证）

当强缓存失效后，浏览器会向服务器验证资源是否修改：

Last-Modified/If-Modified-Since：

Last-Modified: Wed, 21 Oct 2020 07:28:00 GMT

If-Modified-Since: Wed, 21 Oct 2020 07:28:00 GMT

基于文件修改时间问题：1秒精度，可能文件内容未变但时间变化 ETag/If-None-Match：

ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"

If-None-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"

基于文件内容hash值，更精确优先级高于Last-Modified

3. 缓存位置

Memory Cache：内存缓存，快速但容量小，随进程关闭释放Disk Cache：磁盘缓存，速度较慢但容量大，持久化存储Service Worker Cache：PWA应用的独立缓存机制

4. 实际应用示例

二、服务器缓存

1. 基本概念

服务器缓存是指将动态生成的内容或数据库查询结果存储在内存或高速存储中，避免重复计算或查询，提高响应速度。

2. 常见类型

(1) CDN缓存

原理：将静态资源分发到全球边缘节点缓存控制：Cache-Control: public, max-age=86400

清除方式：URL变更或CDN服务商提供的刷新接口

(2) 反向代理缓存（如Nginx）

# Nginx配置示例

proxy_cache_path /path/to/cache levels=1:2 keys_zone=my_cache:10m inactive=60m;

server {

location / {

proxy_cache my_cache;

proxy_cache_valid 200 302 10m;

proxy_cache_valid 404 1m;

}

}

(3) 应用层缓存

内存缓存：Redis/Memcached// Spring Cache示例

@Cacheable(value = "users", key = "#userId")

public User getUser(String userId) {

return userRepository.findById(userId);

}

页面缓存：整页HTML缓存（如Varnish）

(4) 数据库缓存

查询缓存：MySQL Query Cache缓冲池：InnoDB Buffer Pool

3. 缓存策略

(1) 缓存模式

Cache-Aside（旁路缓存）：

Read/Write Through：

所有读写操作都经过缓存层 Write Behind：

先更新缓存，异步批量写入数据库

(2) 失效策略

TTL（Time To Live）：设置固定过期时间LRU（Least Recently Used）：淘汰最近最少使用LFU（Least Frequently Used）：淘汰使用频率最低

4. 缓存问题及解决方案

问题描述解决方案缓存雪崩大量缓存同时失效随机过期时间、多级缓存缓存穿透查询不存在的数据布隆过滤器、空值缓存缓存击穿热点key失效互斥锁、永不过期数据不一致缓存与数据库不一致延时双删、消息队列同步

三、浏览器缓存与服务器缓存对比

特性浏览器缓存服务器缓存存储位置客户端服务端缓存内容静态资源动态内容/数据控制方式HTTP头应用逻辑/CDN配置失效机制时间/ETagTTL/主动失效典型应用CSS/JS/图片API响应/数据库查询优势减少网络请求减轻服务器负载劣势更新不及时架构复杂度高

四、最佳实践

1. 浏览器缓存优化

静态资源：设置长期缓存（max-age=1年）+ 文件名hash动态内容：no-cache或短时间缓存版本控制：

2. 服务器缓存优化

分层缓存：CDN → 反向代理 → 应用缓存 → 数据库缓存热点数据：预加载到内存缓存批量失效：使用消息队列异步处理监控：缓存命中率、响应时间等指标

3. 综合策略

通过合理配置浏览器缓存和服务器缓存，可以显著提升Web应用性能，减少服务器负载，改善用户体验。