http 缓存笔记

http 缓存，有时候静态资源没更新的情况下，不需要每次都去服务器获取，减少资源的请求。

Http 报文中与缓存相关的首部字段

1. 通用首部字段（就是请求报文和响应报文都能用上的字段）

2. 请求首部字段

3. 响应首部字段

4. 实体首部字段

废弃字段

　　http 1.0 版本有 pragma 和 expires 字段。现在字段被抛弃了，但是为了向下兼容，还是有很多网站有带上这两个字段。

pragma

　　pragma 只有no-cache 一个属性值，和 Cache-Contorl 中的 no-cache 一致。

强缓存

　　Expires：的值对应一个GMT（格林尼治时间），比如“Fri, 27 May 2022 12:02:01 GMT”来告诉浏览器资源缓存过期的绝对时间，如果还没过该时间点则不发请求。响应报文中Expires定义的缓存时间是相对服务器上的时间而言的，客户端上的时间跟服务器上的时间不一致（特别是用户修改了自己电脑的系统时间），那缓存时间可能就没啥意义了。

　　Cache-Control： 是http/1.1中新增的属性，在请求头和响应头中都可以使用。其中 max-age 值为相对时间，例 Cache-Control：max-age=700, 是相对响应报文中的 Date 字段 700秒，这样就算客户端跟服务器的时间不一致，也没什么问题了。

　　Date 字段是服务器发送该资源响应报文的时间（GMT格式），连续F5刷新发现 Date 的值都没变化，则说明你当前请求是命中了代理服务器的缓存。

　　以下都是 Cache-Control 字段值

　　可缓存性

public 表明响应可以被任何对象（包括：发送请求的客户端，代理服务器，等等）缓存。
private 表明响应只能被单个用户缓存，不能作为共享缓存（即代理服务器不能缓存它）
no-cache 不使用强缓存，需要与服务器验协商缓存验证。
no-store 缓存不应存储有关客户端请求或服务器响应的任何内容，即不使用任何缓存。

　　过期

max-age=<seconds> 缓存存储的最大周期，超过这个周期被认为过期。
s-maxage=<seconds> 设置共享缓存。会覆盖max-age和expires,私有缓存会忽略它
max-stale[=<seconds>] 客户端愿意接收一个已经过期的资源，可以设置一个可选的秒数，表示响应不能已经过时超过该给定的时间。
min-fresh=<seconds> 客户端希望在指定的时间内获取最新的响应

　　重新验证和重新加载

must-revalidate 如页面过期，则去服务器进行获取。
proxy-revalidate 与must-revalidate 作用相同，但是用于共享缓存。

　　其他

only-if-cached 不进行网络请求，完全只使用缓存。
no-transform 不得对资源进行转换和转变。例如，不得对图像格式进行转换。

　　若报文中同时出现了 Pragma、Expires 和 Cache-Control，优先级为 Expires < Pragma < Cache-Control 。

　　Cache-Control 允许自由组合可选值 Cache-Control: max-age=3600, must-revalidate

　　组合的方式也会有些限制，比如 no-cache 就不能和 max-age、min-fresh、max-stale 一起搭配使用。

　　组合的形式还能做一些浏览器行为不一致的兼容处理。例如在IE我们可以使用 no-cache 来防止点击“后退”按钮时页面资源从缓存加载，但在 Firefox 中，需要使用 no-store 才能防止历史回退时浏览器不从缓存中去读取数据，故我们在响应报头加上如下组合值即可做兼容处理：Cache-Control: no-cache, no-store

协商缓存

　　 强缓会存在这样的问题：

　　　　1、缓存时间到了，但是其实服务器资源并未更新，再次请求一次，如果文件大的话会浪费带宽和时间

　　　　2、缓存时间未到，服务器资源更新了，客户端未请求最新资源　　

　　所以Http1.1 新增以下几个字段

　　Last-Modified / If-Modified-Since

在服务器在响应请求时，会通过 Last-Modified 告诉浏览器资源的最后修改时间。
浏览器再次请求服务器的时候，请求头会包含 if-Modified-Since 字段，后面跟着在服务器传过来的 Last-Modified 的最后修改时间。
服务端收到此请求头发现有 if-Modified-Since，则与被请求资源的最后修改时间进行对比，如果一致则返回 304 和响应报文头，浏览器只需要从缓存中获取信息即可。如果已经修改，那么开始传输响应一个整体，服务器返回：200 OK；

　　Last-Modified 时间精度为1秒，如果1秒内更新，服务器资源更新了，导致资源不准确，或服务器资源更新了，但是资源的内容其实没改变，这时候就又发生了没必要的请求，所以出现了 ETag

　　ETag / If-None-Match

　　　　1、服务器会通过某种算法，给资源计算得出一个唯一标志符（比如md5标志，哈希值），资源内容变化都会导致 ETag 变化，跟最后修改时间没有关系，ETag可以保证每一个资源是唯一的。

　　　　2、在浏览器发起请求，浏览器的请求报文头会包含 If-None-Match 字段，其值为上次返回的Etag发送给服务器，

　　　　3、服务器接收到次报文后发现 If-None-Match 则与被请求资源的唯一标识进行对比。如果相同说明资源内容没有修改，则响应返 304，浏览器直接从缓存中获取数据信息。如果不同则说明资源被改动过，则响应整个资源内容，返回状态码 200。

　　　　需要注意的是，如果资源是走分布式服务器（比如CDN）存储的情况，需要这些服务器上计算ETag唯一值的算法保持一致，才不会导致明明同一个文件，在服务器A和服务器B上生成的ETag却不一样。

如果 Last-Modified 和 ETag 同时被使用，则要求它们的验证都必须通过，才会返回304；

如果 Expires 和 Cache-Control：max-age 都过期了,或 Cache-Contorl 为 no-cache，就会进入协商缓存;

大多数浏览器在点击刷新按钮或按F5时会自行加上“Cache-Control:max-age=0”请求字段，也就是跳过强缓存；

选中url地址栏并按回车键走强缓存（不会被强行加上Cache-Control）；

ctrl+F5 这是跳过强缓存和协商缓存，直接请求最新资源。

CDN缓存（如果有的话）