浏览器缓存策略

3分钟阅读

主要分为两种：强缓存，协商缓存

  • 强缓存：浏览器请求资源时，通过Cache-Control和Expires等响应头中的字段判断是否缓存命中，就从缓存中加载资源，不会向服务器发送请求
  • 协商缓存：当强缓存未命中时，通过请求头中的If-Modified-Since或If-None-Match字段来判断资源是否发生变化
    • 如果资源未变化，服务器返回304 Not Modified状态码，浏览器继续使用缓存资源。
    • 如果资源已变化，服务器返回200 OK状态码和新资源。

实际使用场景

  • 图片、CSS、JavaScript 等静态资源： 可以使用强缓存，设置较长的 max-age 值。
  • HTML 文件： 通常使用协商缓存，确保用户总是获取到最新的页面内容。
  • API 接口： 可以根据 API 的特性选择合适的缓存策略。

Cache-Control (HTTP/1.1 )是目前最常用的字段，通过设置相对时间来控制。

  • max-age=31536000: 表示资源在 31536000 秒（1年）内是新鲜的，直接用缓存。
  • no-cache: 不要被名字骗了！ 它不是“不缓存”，而是“缓存，但在使用前必须去服务器验证一下（走协商缓存）”。
  • no-store: 真正的“不缓存”，任何时候都去服务器下载最新的。
  • public / private: public 表示 CDN 也可以缓存；private 表示只有浏览器能缓存（比如存了用户敏感信息的页面）。

当不使用强缓存的时候，就要用协商缓存，有两种方式实现协商

  • ETag/If - Noe -Match ：在访问文件的时候，比较上次访问文件给的ETag，即由第一次文件内容生成的哈希值，与第二次访问文件的If - None - Match进行对比，如果相同说明文件没变，返回状态码304，如果变了，则重新访问，返回200与新数据
  • Last- Modified / If - Modified - Since：这是一个很粗糙的比较，是将上一次与这一次文件的文件最后修改时间，如果修改时间一样，说明没有修改，返回304，变了，则重新访问文件

reference

前端知识速记：浏览器缓存机制 - 强缓存与协商缓存