浏览器-http缓存和本地存储

http缓存

强缓存

• 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