http的缓存问题

一句话概括：浏览器请求资源的时候，会首先检查本地是否有缓存，减少向服务器请求的次数

一、缓存类型：

1. 强缓存（本地缓存）：直接读本地，不发请求

• 控制方式：
  • ① Cache-Control(HTTP1.1):优先级高
    max-age=秒数
    public：可被缓存，包括代理服务器
    private：客户端缓存
    no-cache：强制走协商缓存验证(不要直接用本地缓存，必须去验证，验证完了再说用不用)
    no-store：禁止缓存，每次都需要请求服务器
    通常情况时服务端配置，少数情况前端可通过meta标签配置，但优先级低于服务端响应头，（<meta http-equiv="Cache-Control" content="max-age=3600">）
  • ② Expires(HTTP1.0)：指定资源过期时间

2. 协商缓存（服务器验证）：浏览器发请求验证是否可用，返回304则可用

• 控制方式
  • ① Last-Modified + If-Modified-Since
    服务器返回资源时带LM（最后修改时间）
    浏览器下次请求时带IMS（上次修改时间），服务器对比是否更新
    ** Last-Modified服务器主动添加，表示资源的最后修改时间；If-Modified-Since浏览器自动发送，无需手动添加 **
  • ② ETag + If-None-Match 更精准
    服务器返回资源时带ETag（资源内容hash）
    浏览器下次请求时带If-None-Match，服务器对比hash

总结：浏览器缓存分为强缓存和协商缓存。强缓存即直接读取本地缓存，它的控制方式是cache-control，可以设置过期时间，也可以设置no-cache强制走协商缓存。协商缓存即是浏览器先发一个请求验证缓存是否可用，若返回304则可用，验证的方式有两种，一种是对比修改时间，一种是对比内容hash

二、如何设计缓存策略（数据类型，更新频率，用户体验）

1. 浏览器原生缓存

场景：存储资源
强缓存：静态资源（图片、CSS、js、字体）设置长一些的过期时间
协商缓存：结合ETag对比更新；版本控制 --> URL版本号（?v=1.0.0）

2. 本地存储

场景：存储用户配置、登录信息、需跨页面共享的临时数据

• localStorage：数据永久保存（除非手动清除或浏览器清除），容量较大，同源共享
  • 适用于：缓存用户配置、主题偏好等
• sessionStorage：会话级，浏览器关闭后自动删除，容量较大，不同标签页不共享
  • 适用于：缓存分页状态等
• cookie：自动发送到服务端（fetch默认不带），容量小，可设置过期时间，可配置作用域
  • 适用于：登录凭证JWT，服务端会话状态SessionID

3. 内存缓存

场景：存储频繁访问、更新频率低的数据（下拉列表选项等）
通过维护全局变量，一次请求，后续直接读取，可配合定时器或事件监听定时更新

4. 接口请求缓存（Axios等库自定义缓存）

场景：列表数据、详情页数据
axios-interceptors拦截请求，判断是否读取缓存
根据用户操作调整策略：下拉刷新 --> 强制更新，手动刷新按钮

三、调试：

Chrome浏览器的开发工具：Chrome DevTools -> Network -> Size显示from cache表示使用缓存
勾选 Disable cache 可强制禁用缓存（开发时常用）·