Skip to main content

浏览器缓存

强缓存​

  • Cache-Control。可以设置 max-age，单位为 s，优先级更高
  • Expires

协商缓存​

  • Etag/If-None-Match 优先级更高
  • Last-modified/If-modified-since

如何不使用缓存？

cache-control: no-store（注意区分 no-cache）

如何正确使用强缓存和协商缓存？

  • Cache-Control/Expires —— 请求服务器之前
  • Etag/Last-Modified —— 请求服务器

协商缓存需要配合强缓存使用，如果不启用强缓存的话，协商缓存根本没有意义

大部分 web 服务器都默认开启协商缓存，而且是同时启用两种协商缓存

但是下面的场景需要注意：

  • 分布式系统里多台机器间文件的 Last-Modified 必须保持一致，以免负载均衡到不同机器导致比对失败
  • 分布式系统尽量关闭掉 ETag(每台机器生成的 ETag 都会不一样）

如何提防缓存带来的资源更新问题？

  • 资源文件后面带上唯一的 hash 标识？

cache-control: no-cache 和 cache-control: max-age=0 的区别

  • cache-control: no-cache 浏览器在每次使用资源前都需要做一次 revalidate。这个指令不能阻止缓存响应，如果你不想将 response 存储在缓存中，需要使用 no-store
  • cache-control: max-age=0 资源永远过期，同样这个指令不能阻止缓存响应

参考​