综述

强制缓存优先于协商缓存进行，

若强制缓存生效则直接使用缓存，若不生效则进行协商缓存，

协商缓存由服务器决定是否使用缓存，

协商缓存成功, 返回304，继续使用缓存.

若协商缓存失效，那么代表该请求的缓存失效，重新获取请求结果，再存入浏览器缓存中.

强制缓存

expires

Expires是HTTP/1.0控制网页缓存的字段，其值为服务器返回该请求结果缓存的到期时间，即再次发起该请求时，如果客户端的时间小于Expires的值时，直接使用缓存结果.

到了HTTP/1.1，Expire已经被Cache-Control替代，原因在于Expires控制缓存的原理是使用客户端的时间与服务端返回的时间做对比，那么如果客户端与服务端的时间因为某些原因（例如时区不同；客户端和服务端有一方的时间不准确）发生误差，那么强制缓存则会直接失效，这样的话强制缓存的存在则毫无意义.

Cache-Control

主要取值:

  • public：所有内容都将被缓存（客户端和代理服务器都可缓存）
  • private：所有内容只有客户端可以缓存，Cache-Control的默认取值
  • no-cache：客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定
  • no-store：所有内容都不会被缓存，既不使用强制缓存，也不使用协商缓存
  • max-age=xxx (xxx is numeric)：缓存内容将在xxx秒后失效

和expires同时存在时，只有Cache-Control生效

存放位置

在浏览器中，

js和图片等文件解析执行后直接存入内存缓存中，当刷新页面时只需直接从内存缓存中读取(from memory cache)

而CSS文件则会存入硬盘文件中，所以每次渲染页面都需要从硬盘读取缓存(from disk cache)

协商缓存

协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程.

控制协商缓存的字段分别有：last-modified / if-modified-since和 etag / if-none-match，

其中etag / if-none-match的优先级比last-modified / if-modified-since高

last-modified / if-modified-since:

客户端再次发起某请求时, if-modified-since带上上次请求返回的last-modified,

服务器对比资源修改时间后, 若资源无更新, 则返回304

etag / if-none-match:

etag是服务器响应请求时，返回当前资源文件的一个唯一标识(由服务器生成)

客户端再次发起某请求时, if-none-match带上上次请求返回的etag,

服务器对比该唯一标识, 若资源无更新, 则返回304

参考链接

彻底理解浏览器的缓存机制 https://juejin.im/entry/5ad86c16f265da505a77dca4