当前位置：首页 > news >正文

【代码优化篇】强缓存和协商缓存

news 2025/5/11 7:18:31

强缓存和协商缓存

- - 一、强缓存与协商缓存的区别
  - 二、Vue2 前端实现强缓存（静态资源）
  - 三、Spring Boot 后端实现协商缓存（动态接口）
  - 四、测试缓存效果
  - 五、注意事项

一、强缓存与协商缓存的区别

强缓存：浏览器直接读取本地缓存，不发送请求到服务器。通过 Cache-Control 或 Expires 响应头实现。
协商缓存：浏览器发送请求到服务器，由服务器判断资源是否过期。通过 ETag/If-None-Match 或 Last-Modified/If-Modified-Since 实现。

二、Vue2 前端实现强缓存（静态资源）

步骤：

打包生成哈希文件名：Vue2 默认在 webpack 配置中为文件名添加 contenthash，如 app.a1b2c3.js。
服务器配置强缓存头：在 Nginx/CDN 中为静态资源设置 Cache-Control: max-age=31536000（1年）。

示例 Nginx 配置：

location /static {alias /path/to/static;expires 1y; # 等效于 Cache-Control: max-age=31536000add_header Cache-Control "public";
}

三、Spring Boot 后端实现协商缓存（动态接口）

步骤：

添加 ETag 支持：使用 ShallowEtagHeaderFilter 自动生成 ETag。
返回带缓存控制的响应：手动设置 Cache-Control 头。

示例代码：

import org.springframework.context.annotation.Configuration;
import org.springframework.web.filter.ShallowEtagHeaderFilter;
import org.springframework.http.CacheControl;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;import javax.servlet.Filter;
import java.util.concurrent.TimeUnit;@Configuration
public class WebConfig {public Filter etagFilter() {return new ShallowEtagHeaderFilter();}
}@RestController
public class ApiController {// 协商缓存示例（自动 ETag）@GetMapping("/user")public ResponseEntity<User> getUser() {User user = userService.findUser();return ResponseEntity.ok().cacheControl(CacheControl.maxAge(30, TimeUnit.MINUTES)) // 建议缓存但需要验证.body(user);}// 强缓存示例（慎用）@GetMapping("/static-data")public ResponseEntity<String> getStaticData() {return ResponseEntity.ok().cacheControl(CacheControl.maxAge(7, TimeUnit.DAYS)) // 强缓存7天.body("Immutable Data");}
}

四、测试缓存效果

强缓存：
- 首次请求：返回 200 OK，响应头包含 Cache-Control: max-age=31536000。
- 再次请求：浏览器直接读取缓存，状态为 200 (from disk cache)。
协商缓存：
- 首次请求：返回 200 OK，响应头包含 ETag: "a1b2c3"。
- 再次请求：请求头携带 If-None-Match: "a1b2c3"，若未修改，服务器返回 304 Not Modified。