轻松理解HTTP缓存策略 (2)

从上面的几个小例子可以看出,有时候为了知道是不是有更新,我必须去问老板,比如第一个例子里面:“老板,第10集我看完了哦,你还有没有新的啊?”。这种为了知道有没有更新,必须跟服务端沟通过才知道的,我们称之为协商缓存。还有些场景,我不去问就知道有没有更新,比如第三个例子,因为知道是周更的,当周一来之前,我都不会去问了,到了周一再去问,这种不用跟服务器协商直接用本地副本的叫做强制缓存。换成技术的话说就是,强制缓存不用发请求直接用本地缓存,协商缓存要发请求去问服务器有没有更新。下面我们详细来讲下这两种缓存:

协商缓存

前面第一个例子和第二个例子每次都需要向服务器端询问,所以是协商缓存

ETag和If-None-Match

ETag是URL的Entity Tag,就是一个URL资源的标识符,类似于文件的md5,计算方式也类似,当服务器返回时,可以根据返回内容计算一个hash值或者就是一个数字版本号,类似于我们的第10集,具体返回什么值要看服务器的计算策略。然后将它加到response的header里面,可能长这样:

ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"

客户端拿到后会将这个ETag和返回值一起存下来,等下次请求时,使用配套的If-None-Match,将这个放到request的header里面,可能长这样:

If-None-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"

然后服务端拿到请求里面的If-None-Match跟当前版本的ETag比较下:

如果是一样的话,直接返回304,语义为Not Modified,不返回内容(body),只返回header,告诉浏览器直接用缓存。

如果不一样的话,返回200和最新的内容

与ETag配套的还有一个不太常用的request header ----If-Match,这个和前面If-None-Match的语义是相反的。前面If-None-Match的语义是如果不匹配就下载。而If-Match通常用于post或者put请求中,语义为如果匹配才提交,比如你在编辑一个商品,其他人也可能同时在编辑。当你提交编辑时,其他人可能已经先于你提交了,这时候服务端的ETag就已经变了,If-Match就不成立了,这时候服务端会给你返回412错误,也就是Precondition Failed,前提条件失败。如果If-Match成立,就正常返回200。

Last-Modified & If-Modified-Since

Last-Modified和If-Modified-Since也是配套使用的,类似于ETag和If-None-Match的关系。只不过ETag放的是一个版本号或者hash值,Last-Modified放的是资源的最后修改时间。Last-Modified是放到response的header里面的,可能长这样:

Last-Modified: Wed, 21 Oct 2000 07:28:00 GMT

而客户端浏览器在使用时,应该将配套的If-Modified-Since放到request的header里面,长这样:

If-Modified-Since: Wed, 21 Oct 2000 07:28:00 GMT

服务端拿到这个头后,会跟当前版本的修改时间进行比较:

当前版本的修改时间比这个晚,也就是这个时间后又改过了,返回200和新的内容

当前版本的修改时间和这个一样,也就是没有更新,返回304,不返回内容,只返回头,客户端直接使用缓存

与If-Modified-Since对应的还有If-Unmodified-Since,If-Modified-Since可以理解为有更新才下载,那If-Unmodified-Since就是没有更新才下载。如果客户端传了If-Unmodified-Since,像这样:

If-Unmodified-Since: Wed, 21 Oct 2000 07:28:00 GMT

服务端拿到这个头后,也会跟当前版本的修改时间进行比较:

如果这个时间后没有更新,服务器返回200,并返回内容。

如果这个时间后有更新,其实就是这个if不成立,会返回错误代码412,语义为Precondition Failed

ETag和Last-Modified优先级

ETag和Last-Modified都是协商缓存,都需要服务器进行计算和比较,那如果这两个都存在,用哪个呢?答案是ETag,ETag的优先级比Last-Modified高。因为Last-Modified在设计上有个问题,那就是Last-Modified的精度只能到秒,如果一个资源频繁修改,在同一秒进行多次修改,你从Last-Modified上是看不出来区别的。但是ETag每次修改都会生成新的,所以他比Last-Modified精度高,更准确。但是ETag也不是完全没问题的,你的ETag如果设计为一个hash值,每次请求都要计算这个值,需要额外耗费服务器资源。具体使用哪一个,需要根据自己的项目情况来进行取舍。

强制缓存

上面扯蛋那里的第三个例子和第四个例子就是强制缓存,就是我知道在某个时间段完全不用去问服务端,直接去用缓存就行。这两个例子里面提到的Expires是一个单独的header,max-age和immutable同属于Cache-Control这个header。

Expires

Expires比较简单,就是服务器response的header带上这个字段:

Expires: Wed, 21 Oct 2000 07:28:00 GMT

然后在这个时间前,客户端浏览器都不会再发起请求,而是直接用缓存资源。

Cache-Control

Cache-Control相对比较复杂,可设置属性也比较多,max-age只是其中一个属性,长这样:

Cache-Control: max-age=20000

这表示当前资源在20000秒内都不用再请求了,直接使用缓存。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpsfgg.html