前端是万能的

强缓存和协商缓存区别和过程

2019-06-04  本文已影响1人  肆意木

强缓存(本地缓存)

1. 概念

直接使用本地的缓存,不用跟服务器进行通信

2. 相关header字段

2.1 expires

一个未来时间,代表请求有效期,没有过期之前都使用当前请求。

eg: 
Thu , 15 Apr 2099  20:00:00  GMT  ,代表 2099 年4月16日请求过期,在这之前当前请求都有效。

2.2cache-control,优先级高于 expires。

value 是一个时间段,请求有效的最大时间段,限制:1.需要记住请求时间还需要计算是否在这个时间段内 2. 服务器与客户端时间必须一致。

因为它是一个时间段,所以意味着,可以设置一些默认值,常见的默认值设置: 

no-cache:不使用本地缓存。向浏览器发送新鲜度校验请求

pubilc:任何情况下都缓存(即使是HTTP认证的资源)

private:只能被终端用户的浏览器缓存,不允许CDN等中继缓存服务器对其缓存

no-store:禁止浏览器缓存数据,也禁止保存至临时文件中,每次都重新请求,多次设置 cache-control,优先级最高

3. F5 刷新后无效,Ctrl + F5 强制刷新后无效

强制缓存如何重新加载缓存过的资源?

更新页面中引用的资源路径,让浏览器主动放弃缓存,加载新资源


协商缓存

1. 概念

将资源一些相关信息返回服务器,让服务器判断浏览器是否能直接使用本地缓存,整个过程至少与服务器通信一次

2. 相关header字段

Last-Modified/If-Modified-Since(两个都是时间格式字符串)

过程:

1. 浏览器第一次发请求,服务器在返回的 respone 的 header 加上 Last-Modified,表示资源的最后修改时间

2. 再次请求资源,在 requset 的 header 加上 If-Modified-Since ,值就是上一次请求返回的 Last-Modified 值

3. 服务器根据请求传过来的值判断资源是否有变化,没有则返回 304,有变化就正常返回资源内容,更新 Last-Modified 的值

4. 304 从缓存加载资源,否则直接从服务器加载资源

3. Etag/If-None-Match(标识符字符串)

与 Last-Modified/If-Modified-Since 不同的是,返回 304 时,ETag 还是会重新生成返回至浏览器。

4. 优点

有些文件可能会周期性更改,但内容并没有修改时,用 Etag 就不用重新拉取;

1S 内修改的文件也会检测到;

优先级高于 Last-Modified。

5.为什么协商缓存有两个属性一起出现:

协商缓存是浏览器判断资源是否可用,所以需要两个标识,第一个是第一次请求的响应头带上某个字段(Last-Modified或者Etag),第二个则是后续请求带上的对应请求字段(If-Modified-Since或者If-None-Match),两个标识一起出现才有意义,单独则没有什么效果。

6. F5 刷新后依然有效,Ctrl + F5 强制刷新后无效

上一篇 下一篇

猜你喜欢

热点阅读