跳到主要内容

缓存

通过缓存可以减少网络请求,提升加载速度。按优先级分为强缓存(本地判断)和协商缓存(服务器判断)

一、 强缓存(客户端自主判断,不发请求)

在缓存未过期时,客户端会优先使用本地缓存(强缓存),浏览器返回状态码 200 OK (from cache)

头部控制

  • Expires(http 1.0):绝对时间(如 Expires: Web, 21 Oct 2025 07:28:00 GMT),依赖客户端时间(可能不准)
  • Cache-Control(HTTP 1.1 优先级更高):相同的时间,如 max-age=3600(缓存 3600 秒);no-cache(跳过强缓存,直接走协商缓存);no-store (不缓存)

二、 协商缓存(需发请求,服务器判断)

在本地缓存的过期(或 Cache-Control: no-cache),向服务器发送请求,由服务器判断资源是否发生修改。若未修改返回 304 not Modified(客户端缓存);否则返回 200 和新资源。

头部控制

  • 基于时间:Last-Modified (服务器返回资源最后修改时间) + If-Modified-Since (客户端请求时携带,询问是否在该时间后修改)
  • 基于指纹(更可靠):ETag (服务器返回唯一标识,如哈希) + If-None-Match (客户端请求时携带,询问标识是否变化)

三、 接口缓存优化策略

  • 延长强缓存时间:对静态资源(JS/CSS/图片)设置较长 max-age (如 Cache-Control: max-age=31536000 1 年)
  • 资源哈希化:静态资源文件名加哈希(如 app.8f2d.js),更新时改变哈希值,确保新资源被加载(避免缓存实效问题)
  • 优先使用 ETag:ETag 基于文件内容哈希,比 Last-Modified (时间戳)更精准(避免文件未改但时间戳变化导致缓存实效)
  • 拆分资源:将大资源拆分为小资源(如拆分 JS 为基础库 + 业务逻辑),避免局部修改导致整体缓存实效
  • 利用 CDN 缓存:静态资源部署到 CDN,CDN 节点缓存资源,减少服务器压力,提升访问速度
  • Service Worker 缓存:通过 Service Worker 拦截请求,自定义缓存策略(如离线缓存、强制缓存特定接口)
  • 协商缓存降级:对频繁变化但允许短暂过期的接口,启用协商缓存(Cache-Control: no-cache),减少 数据传输量