😃

强缓存与协商缓存

Tips: 强缓存优先级大于协商缓存,即两者同时存在时,如果强缓存开启且在有效期内,则不会走协商缓存。

1.强缓存

浏览器本地根据服务器设置的过期时间来判断是否使用缓存,未过期则从本地缓存里拿资源,已过期则重新请求服务器获取最新资源。

1.1 Expires

HTTP 1.0,它描述的是一个绝对时间,由服务器返回。Expires受限于本地时间,如果修改了本地时间,可能会造成缓存失效.对于资源的请求,如果在Expires之内,则浏览器会直接读取缓存,不再请求服务器。

1.2 Cache-Control

HTTP 1.1,优先级高于Expires,请求头和响应头都支持这个属性,通过它提供的不同的值来定义缓存策略。
  1. Cache-Control: max-age=31536000,表示的是相对时间
  1. Cache-Control: no-store: 缓存不应存储有关客户端请求或服务器响应的任何内容,即不使用任何缓存。
  1. Cache-Control: no-cache: 在发布缓存副本之前,强制要求缓存把请求提交给原始服务器进行验证 (协商缓存验证)。
  1. Cache-Control: public: 表明响应可以被任何对象(包括:发送请求的客户端,代理服务器,等等)缓存,即使是通常不可缓存的内容。(例如:1.该响应没有max-age指令或Expires消息头;2. 该响应对应的请求方法是 POST 。)
  1. Cache-Control: private: 表明响应只能被单个用户缓存,不能作为共享缓存(即代理服务器不能缓存它)。私有缓存可以缓存响应内容,比如:对应用户的本地浏览器。
  1. Cache-Control: must-revalidate: 一旦资源过期(比如已经超过max-age),在成功向原始服务器验证之前,缓存不能用该资源响应后续请求。
  1. 更多请看MDN:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Cache-Control

2.协商缓存

浏览器本地每次都向服务器发起请求,由服务器来告诉浏览器是从缓存里拿资源还是返回最新资源给浏览器使用。

2.1 Last-Modified和If-Modified-Since

HTTP 1.0,Last-Modified表示本地文件最后修改日期,浏览器会在请求头加上If-Modified-Since即上次响应的Last-Modified的值,询问服务器在该日期后资源是否有更新,有更新的话就会将新的资源发送回来,但是如果在本地打开缓存文件,就会造成Last-Modified被修改
  1. 如果没有变化则返回304,告诉浏览器继续使用缓存(不返回资源文件)。
  1. 如果发生变化,则返回200和最新的资源文件给浏览器使用。

2.2 Etag和If-None-Match

所以HTTP 1.1出现了Etag,浏览器初次请求资源,服务器返回资源,同时生成一个Etag值携带在响应头里返回给浏览器,当浏览器再次请求资源时会在请求头里携带If-None-Match,值是之前服务器返回的Etag的值,服务器收到之后拿该值与资源文件最新的Etag值做对比。
  1. 如果没有变化则返回304,告诉浏览器继续使用缓存(不返回资源文件)。
  1. 如果发生变化,则返回200和最新的资源文件给浏览器使用。