浏览器缓存

121 阅读3分钟

浏览器缓存分为强缓存和协商缓存。

强缓存:用户发送的请求,直接从客户端缓存中获取,不发送请求到服务器,不与服务器发送交互行为。

协商缓存:用户发送请求到服务器后,由服务器判定是否从缓存中获取资源。

两者共同点:都会判断缓存是否过期,客户端获得数据最后都是从客户端缓存获得。 两者的区别:强缓存不与服务器进行交互。协商缓存需要询问服务器缓存是否可以使用缓存。

强缓存:有Expires,cache-Control两种。

Expires:是HTTP1.0的协议。

浏览器向服务器发送请求后,服务器会在响应头存储缓存过期时间。浏览器接收到请求后,将这个值存储起来。

第二次发送请求时,会判断缓存过期时间,与主机时间是否相等。如果缓存没有过期,那么从缓存里拿到数据。如果不相等,缓存失效,重新进行缓存。

弊端:本地时间修改会影响过期时间。

cache-Control:是HTTP1.1中的协议

cache-Control是设置相对时间。当第二次发生请求时,浏览器会将上次修改时间与当前时间做比较。如果修改相对时间小于最大缓存时间,那么从缓存里那数据。如果大于最大缓存时间,那么重新拿取数据。(如果有错误,请指出,感谢)

常用属性设置有public,private,no-store(不缓存),no-cache(直接进行协商缓存)

弊端:当打开本地缓存文件时。修改时间会发生改变。影响相对时间判断。

从缓存中加载,状态为200

协商缓存

当缓存过期后,浏览器会与服务器进行协商。询问本地缓存是否可以使用。有两种方式,一种是根据修改时间来进行判断。一种是根据Etag(算法生成的一个标志)

last-modify和if-modified-since

第一次浏览器响应请求时,会存储文件修改时间,浏览器接收到会存储起来。下次发起请求时通过if-modify-since传到服务端进行询问。判断文件是否被修改。

如果没有被修改返回304,如果修改返回200,并且返回响应数据。

弊端:if-modified-since 是以秒为单位。如果一秒内发生多次变化,可能感受不到。

Etag 和 if-none-match

第一次服务器响应请求时,会使用算法生成一个Etag,并且将这个唯一值传给浏览器。浏览器会将Etag存储起来。下次需要获取缓存时,浏览器将Etag的值放入if-none-match中,跟随请求传给服务器。服务器会判断这个值是否被改变。

如果可以用本地缓存,返回304,如果不能使用本地缓存,返回200。

弊端:Etag是由算法生成的,会占内存。