http缓存:强缓存&协商缓存

浏览器缓存:强缓存&协商缓存

强缓存（Strong Cache）

1. 概念:强缓存是指浏览器直接使用本地缓存资源，不向服务器发送请求。
2. 作用:减少 HTTP 请求次数、提升页面加载速度、降低服务器压力
3. 使用场景:静态资源（JS、CSS、图片、字体）、资源内容长期不变、通过文件名 hash 控制更新（如：app.abc123.js）
4. 如何使用:

• (1)通过响应头控制Cache-Control

Cache-Control: max-age=3600

5. 注意事项：

• 更新资源通过文件名加hash值更新否则缓存没过期用户拿到的是旧资源
• 单页面应用html文件要禁用缓存

协商缓存（Conditional Cache）

1. 概念:协商缓存是指浏览器会向服务器发送请求，由服务器判断资源是否更新,通过文件生成的hash值或文件修改时间
2. 作用:在保证资源最新的前提下减少数据传输, 避免重复下载资源
3. 使用场景:静态资源文件
4. 注意事项

• ETag 优先级高于 Last-Modified
• Last-Modified 精度是秒，不够精确
• 协商缓存一定会发请求
• 304 响应没有响应体

强缓存 vs 协商缓存

维度	强缓存	协商缓存
是否请求服务器	否	是
性能	更快	较慢
控制方式	Cache-Control	ETag / Last-Modified
数据是否最新	不一定	更可靠

前端nginx推荐配置

http {
    # 定义变量
    map $sent_http_content_type $cache_control_map {
        "text/html"    "no-store, max-age=0"; # html 文件禁止强缓存
        "application/json"    "no-store, max-age=0"; # 接口禁用缓存, 接口走nginx代理时有效
        default        "max-age=315360000"; # 其他文件设置缓存为1年(其他文件打包时有生成哈希后缀, 可以设置缓存时间长一些)
    }

    server {
      add_header "Cache-Control" $cache_control_map; # 设置 Cache-Control
      # ...
    }
}