http缓存机制

强缓存

如果浏览器中存在缓存数据并且数据没有过期，那么直接从缓存中读取数据，无需向服务器发起询问

流程：

​

相关头部字段：

• Cache-Control

  • max-age=<seconds> 设置缓存存储的最大周期，超过这个时间缓存被认为过期(单位秒)。与 Expires 相反，时间是相对于请求的时间
  • public 表明响应可以被任何对象（包括：发送请求的客户端，代理服务器，等等）缓存，即使是通常不可缓存的内容
  • private 表明响应只能被单个用户缓存，不能作为共享缓存（即代理服务器不能缓存它）。私有缓存可以缓存响应内容
  • no-cache 告诉浏览器、缓存服务器，不管本地副本是否过期，使用资源副本前，一定要到源服务器进行副本有效性校验
  • no-store 缓存不应存储有关客户端请求或服务器响应的任何内容
• Expires

expires 字段规定了缓存的资源的过期时间，在此时间之前，缓存中的资源都是有效的，该字段的 value 是一个格林威治时间格式（GMT)的时间, 即世界标准时间，js 通过 new Date().toUTCString()可得到，形如 Tue, 27 Feb 2018 06:37:48 GMT。缺点很明显，时间期限是服务器生成，存在着客户端和服务器的时间误差，固定时间，HTTP 1.0 时的规范。相比较 cache-control 优先级较低。

协商缓存

流程：

资源未失效

资源已失效

相关头部字段：

• Last-Modified 响应头和 If-Modified-Since 请求头

Last-Modified 的值表示的是资源的最后修改时间，在浏览器第一次发起 HTTP 请求时，服务器会返回该响应头。
浏览器在下次发起 HTTP 请求时，会带上 If-Modified-Since 请求头，其值就是第一次发送 HTTP 请求时，服务器设置在 Last-Modified 响应头中的值
服务器收到请求后如果发现有请求头 If-Modified-Since 则与被请求资源的最后修改时间进行比对。若资源的最后修改时间大于 If-Modified-Since，说明资源有被改动过，则响应完整的资源内容，返回状态码为 200；若资源的最后修改时间小于或等于 If-Modified-Since，说明资源未被修改，则响应 HTTP 状态码为 304，告知浏览器继续使用所保存的缓存。

• Etag 响应头和 If-None-Match 请求头

Etag 响应头的值为当前资源在服务器的唯一标识（生成规则由服务器决定），在浏览器第一次发起 HTTP 请求时，服务器会返回该响应头。
当浏览器下次向服务端请求该资源时，会带上 If-None-Match 请求头，其值为第一次请求时服务器返回的 Etag 响应头的值。
服务器收到请求后如果发现有请求头头 If-None-Match 则与被请求资源的唯一标识进行比对。如果不同，说明资源有被改动过，则响应完整的资源内容，返回状态码为 200；如果相同，说明资源未被修改过，则响应 HTTP304，告知浏览器继续使用所保存的缓存。

总结

对于强缓存，服务器通知浏览器一个缓存时间，在缓存时间内，下次请求，直接用缓存，不在缓存时间内，执行比较缓存策略。
对于协商缓存，将缓存信息中的 Etag 或者 Last-Modified 通过请求发送给服务器，由服务器校验，如果未过期返回 304 状态码时，浏览器直接使用缓存；如果已过期，返回 200 状态码以及最新资源。

原文链接：http://huaweiup.com/FE-DOCS/#/fe/web/http-cache