• 缓存控制是浏览器处理资源的一种方式
• 当客户端存放的资源满足要求时, 客户端可以直接使用而不必去服务器获取
• 当我们访问页面时, 就可以很快的呈现出页面来, 提供更好的用户体验

http 的缓存处理方式

• 缓存处理一般是通过设置相应的请求头/响应头实现的 浅谈浏览器缓存
• 常见的处理方式有 4 种
  • Last-Modified / If-Modified-Since
  • Etag / If-None-Match
  • Expires
  • Cache-Control
• 前 3 种是 http 1.0 就已经支持的, 具体原理参考 缓存的设置/处理
• Cache-Control 是 http 1.1 支持的, 本文我们主要讲这个

Cache-Control 概述

• Cache-Control 通用消息头字段，被用于在 http 请求和响应中，通过指定指令来实现缓存机制。
• 缓存指令是单向的，这意味着在请求中设置的指令，不一定被包含在响应中。

Cache-Control 指令

可缓存性

• public
  表明响应可以被任何对象
• private
  表明响应只能被单个用户缓存，不能作为共享缓存（代理服务器不能缓存它）
• no-cache
  在发布缓存副本之前，强制要求缓存把请求提交给原始服务器进行验证 (协商缓存验证)。
• no-store
  缓存不应存储有关客户端请求或服务器响应的任何内容，即不使用任何缓存。

到期/期限性

• max-age=<seconds>
  设置缓存存储的最大周期，超过这个时间缓存被认为过期 (单位秒)。
  与Expires相反，时间是相对于请求的时间。
• s-maxage=<seconds>
  覆盖max-age或者Expires头，但是仅适用于共享缓存 (比如各个代理)，私有缓存会忽略它。
• max-stale[=<seconds>]
  表明客户端愿意接收一个已经过期的资源。
  可以设置一个可选的秒数，表示响应不能已经过时超过该给定的时间。
• min-fresh=<seconds>
  表示客户端希望获取一个能在指定的秒数内保持其最新状态的响应。

重新验证和重新加载性

• must-revalidate
  一旦资源过期（比如已经超过max-age），在成功向原始服务器验证之前，缓存不能用该资源响应后续请求。
• proxy-revalidate
  与 must-revalidate 作用相同，但它仅适用于共享缓存（例如代理），并被私有缓存忽略。

其他

• no-transform
  不得对资源进行转换或转变。Content-Encoding、Content-Range、Content-Type等 HTTP 头不能由代理修改。例如，非透明代理或者如Google’s Light Mode可能对图像格式进行转换，以便节省缓存空间或者减少缓慢链路上的流量。no-transform指令不允许这样做。
• only-if-cached
  表明客户端只接受已缓存的响应，并且不要向原始服务器检查是否有更新的拷贝。

Cache-Control 示例

禁止缓存

Cache-Control: no-store

不进行任何缓存, 每次都去原服务器获取资源

协商缓存

Cache-Control: no-cache
# or
Cache-Control: max-age=0, must-revalidate

• 在使用资源时, 都去服务器校验一下资源是否可以直接使用
• 如果可以直接使用返回状态码304(不返回数据实体), 如果不可用返回资源信息
• 注意: 服务器关闭或失去连接, 浏览器可能会直接使用缓存资源。 好像还有浏览器的前进后退

总结

• 通常需要记住几个常用的, 就够我们使用了
  • no-store no-cache public max-age must-revalidate
• 如果确实遇到了一些复杂的场景, 建议再回来看文档
• 一般情况下会结合 Nginx 服务器使用, 所以还应了解一些 Nginx 知识

相关文档

浅谈浏览器缓存
前端应该了解的 Nginx 知识

参考文档

developer.mozilla.org/zh-CN/docs/…