浏览器缓存

Posted samsara-yx

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了浏览器缓存相关的知识,希望对你有一定的参考价值。

一般来说浏览器缓存可以分为两类:

1.)强缓存

2.)协商缓存(对比缓存)

浏览器在加载资源时,会先判断是否命中强缓存再验证是命中协商缓存。

 

//强缓存

浏览器在加载资源时,会先根据本地缓存资源的 header中的信息判断是否命中强缓存,如果命中则直接使用缓存中的资源不会再向服务器发送请求。

 

技术分享图片

从图中可以看出,强缓存一般是这样一个流程:

1.)查看 header头中的 Expire和 Cache-control来判断是否满足规则;

2.)如果满足规则,就返回缓存的数据;

3.)如果不满足规则,就向服务器发送请求;

4.)服务器返回数据;

5.)将新数据存入缓存。

6.)所以我们主要就是关注 Expire和 Cache-control这两个字段。

 

//Expire

同样地,我们看看MDN中如何解释这个字段:

The Expires header contains the date/time after which the response is considered stale.

这个字段包含了一个时间,过了这个时间,响应将会失效。

也就是说,Expire这个字段表示缓存到期时间,我们来打开一个网站并查看 Response Header看看这个字段:

Expires:Fri, 27 Oct 2017 07:55:30 GMT

可能在你查看这的时候发现时间不对啊,怎么都已经是过去了 ~

GMT表示的是格林威治时间,和北京时间相差8小时。

上面的这个时间表示的是 2017年10月27日15:55:30。

通过设置 Expire来设置缓存有一个致命缺点:

可以看出,这个是个绝对时间,也就是说,如果我修改了客户端的本地时间,是不是就会导致判断缓存失效了呢。

 

//Cache-Control

既然不能设置绝对时间,那我就设置个相对时间呗。在 HTTP/1.1中,增加了一个字段 Cache-Control,它包含一个 max-age属性,该字段表示资源缓存的最大有效时间,这就是一个相对时间。

Cache-Control:max-age=600

这个表示的就是最大有效时间是 600s,对的,它的单位是秒。

Cache-Control除了 max-age属性之外还有一些属性:

1.)no-cache:需要进行协商缓存,发送请求到服务器确认是否使用缓存。

2.)no-store:禁止使用缓存,每一次都要重新请求数据。

3.)public:默认设置。

4.)private:不能被多用户共享。

现在基本上都会同时设置 Expire和 Cache-Control,Cache-Control的优先级别更高。

 

//协商缓存

当强缓存没有命中的时候,浏览器会发送一个请求到服务器,服务器根据请求头中的部分信息来判断是否命中缓存。如果命中,则返回 304,告诉浏览器资源未更新,可使用本地的缓存。

技术分享图片

从图中可以看出,协商缓存一般是这样一个流程:

)把资源标识,比如 If-Modify-Since或 Etag发送到服务器,确认资源是否更新;)如果资源未更新,请求响应返回的http状态为 304并且会显示一个 Not Modified的字符串,告诉浏览器使用本地缓存;)如果资源已经更新,返回新的数据;)将新数据存入缓存。

Last-Modified,If-Modified-Since

浏览器第一次请求资源的时候,服务器返回的 header上会带有一个 Last-Modified字段,表示资源最后修改的时间。

Last-Modified: Fri, 27 Oct 2017 07:55:30 GMT

同样的,这是一个 GMT的绝对时间。

当浏览器再次请求该资源时,请求头中会带有一个 If-Modified-Since 字段,这个值是第一次请求返回的 Last-Modified的值。服务器收到这个请求后,将 If-Modified-Since和当前的 Last-Modified进行对比。如果相等,则说明资源未修改,返回 304,浏览器使用本地缓存。

well,这个方法也是有缺点的:

1.)最小单位是秒。也就是说如果我短时间内资源发生了改变,Last-Modified并不会发生变化;

2.)周期性变化。如果这个资源在一个周期内修改回原来的样子了,我们认为是可以使用缓存的,但是 Last-Modified可不这样认为。

所以,后来又引入一个 Etag。

Etag

Etag 一般是由文件内容 hash生成的,也就是说它可以保证资源的唯一性,资源发生改变就会导致 Etag发生改变。

同样地,在浏览器第一次请求资源时,服务器会返回一个 Etag标识。当再次请求该资源时, 会通过 If-no-match字段将 Etag 发送回服务器,然后服务器进行比较,如果相等,则返回 304表示未修改。

Last-Modified和 Etag是可以同时设置的,服务器会优先校验 Etag,如果 Etag相等就会继续比对 Last-Modified,最后才会决定是否返回 304。

以上是关于浏览器缓存的主要内容,如果未能解决你的问题,请参考以下文章

浏览器缓存原理简述

HTTP缓存

Vue 部署上线清除浏览器缓存

为啥在浏览器缓存处理缓存时使用服务工作者进行缓存?

浏览器缓存:强缓存和协商缓存

HTTP学习彻底弄懂 Http 缓存机制 - 浏览器缓存机制详解