Http强缓存和协商缓存

一、缓存介绍

1、什么是缓存?

缓存是一种保存资源副本并在下次请求时直接使用该副本的技术。

2、为什么需要缓存?

如果没有缓存的话,每次网络请求都要加载大量的图片和资源,这会使页面的加载变慢许多。
缓存的目的就是为了尽量减少网络请求的体积和数量,让页面加载的更快,节省带宽,提高访问速度,降低服务器压力。

3、哪些资源可以被缓存?——静态资源(css、js、img)

网站的 html 是不能被缓存的。因为网站在使用过程中 html 随时有可能被更新,随时有可能被替换模板。
网页的业务数据也是不能被缓存的。比如留言板和评论区,用户随时都可以在底下评论,那数据库的内容就会被频繁被更新。

二、强制缓存

1、定义:

强缓存:浏览器不会向服务器发送任何请求,直接从本地缓存中读取文件并返回。
Status Code:200
在这里插入图片描述
在这里插入图片描述
200 (from memory cache): 不访问服务器,一般已经加载过该资源且缓存存在了内存当中,直接从内存中中读取缓存。浏览器关闭后,数据将不存在(资源被释放掉了),再次打开相同的页面时,不会出现from memory cache。
200 (from disk cache): 不访问服务器,已经在之间某个时间加载过该资源,直接从磁盘中读取缓存,关闭浏览器后,数组依然存在,因为是存在硬盘当中的,下次打开仍会from disk cache。
优先访问memory cache,其次是disk cache,最后是请求网络资源

2、设置强缓存的方式 Expires & Cache-Control

Expires: 该值是一个GMT时间格式字符串,浏览器进行第一次请求时,服务器会在返回头部加上Expires。下次请求,如果设置了时间,并在设置的时间之前就可以直接读取缓存。
Cache-Control: 该值是利用max-age判断缓存的生命周期,以秒为单位,如果在该生命周期内,则命中强缓存。比如max-age=300 ,则代表在这个请求正确返回时间的5分钟内再次加载资源,就会命中强缓存。
cache-control:除了该字段外,还有下面几个比较常用的设置值:

(1) max-age:用来设置资源(representations)可以被缓存多长时间,单位为秒;
(2) s-maxage:和max-age是一样的,不过它只针对代理服务器缓存而言;
(3)public:指示响应可被任何缓存区缓存;
(4)private:只能针对个人用户,而不能被代理服务器缓存;
(5)no-cache:强制客户端直接向服务器发送请求,也就是说每次请求都必须向服务器发送。服务器接收到 请求,然后判断资源是否变更,是则返回新内容,否则返回304,未变更。这个很容易让人产生误解,使人误 以为是响应不被缓存。实际上Cache-Control: no-cache是会被缓存的,只不过每次在向客户端(浏览器)提供响应数据时,缓存都要向服务器评估缓存响应的有效性。
(6)no-store:禁止一切缓存(这个才是响应不被缓存的意思)。

cache-control是http1.1的头字段,expires是http1.0的头字段,如果expires和cache-control同时存在,cache-control会覆盖expires,建议两个都写。
如果 cache-control 与 expires 同时存在的话, cache-control 的优先级高于 expires

在这里插入图片描述

三、协商缓存

1、定义

协商缓存是一种服务端缓存策略,即通过服务端来判断某件事情是不是可以被缓存。
服务端判断客户端的资源,是否和服务端资源一样,如果一致则返回304,反之返回200和最新的资源。

在这里插入图片描述
在上图中,表明了协商缓存的全过程。首先,如果客户端是第一次向服务器发出请求,则服务器返回资源和相对应的资源标识给浏览器。该资源标识就是对当前所返回资源的一种唯一标识,可以是Etag或者是Last-Modified,这两个字段将在图例结束后展开讲解。
之后如果浏览器再次发送请求时,浏览器就会带上这个资源标识。此时,服务端就会通过这个资源标识,可以判断出浏览器的资源跟服务端此时的资源是否一致,如果一致,则返回304,即表示Not Found 资源未修改。如果判断结果为不一致,则返回200,并返回资源以及新的资源标识。至此就结束了协商缓存的过程。

2、设置协商缓存的方式 (Last-Modified , If-Modified-Since) & (ETag , If-None-Match)

1) Last-Modified , If-Modified-Since

Last-Modified 资源最后修改的时间,对应请求头为 If-Modified-Since,Last-Modified 只能精确到秒级
在这里插入图片描述
当浏览器第一次发请求时,服务器返回资源并在返回头中返回一个Last-Modified 的值给浏览器。这个Last-Modified 的值给到浏览器之后,浏览器会通过 If-Modified-Since 的字段来保存 Last-Modified 的值,且 If-Modified-Since 保存在请求头当中。
之后浏览器再次发送请求时,请求头会带着 If-Modified-Since 的值去找服务器,服务器此时就会匹配浏览器发过来的 If-Modified-Since 是否和自己最后一次修改的 Last-Modified的值相等。如果相等,则返回304,表示资源未被修改;如果不相等,则返回200,并返回资源和新的 Last-Modified的值。

2)Etag,If-None-Match

Etag 资源唯一标识,所谓唯一,可以想象是每个人的身份证,具有唯一性;Etag本质是一个字符串;对应请求头为 If-None-Match
在这里插入图片描述
当浏览器第一次发送请求时,服务器返回资源并返回一个 Etag 的值给浏览器。这个 Etag 的值给到浏览器之后,浏览器会通过 If-None-Match 的字段来保存 Etag 的值,且 If-None-Match 保存在请求头当中。
之后当浏览器再次发送请求时,请求头会带着 If-None-Match 的值去找服务器,服务器此刻就会匹配浏览器发过来的 If-None-Match 是否和自己最后一次修改的 Etag 的值相等。如果相等,则返回 304 ,表示资源未被修改;如果不相等,则返回 200 ,并返回资源和新的 Etag 的值。

3、对比

  • 当响应头部 Response Headers 同时存在 Last-ModifiedEtag 的值时,会优先使用Etag;
    Etag优先级是高于Last-Modifed的,所以服务器会优先验证Etag
  • Last-Modified 只能精确到秒级,而Etag可以更精确。
    Etag可以更精确
  • 如果资源被重复生成,而内容不变,则Etag更精确
    在这里插入图片描述
    在这里插入图片描述

四、刷新操作对缓存的影响

(1)正常操作

定义: 地址栏输入 url ,跳转链接,前进后退等。
对缓存的影响: 强制缓存有效,协商缓存有效。

(2)手动刷新

定义: F5 ,点击刷新按钮,右击菜单刷新。
对缓存的影响: 强制缓存失效,协商缓存有效。

(3)强制刷新

定义: ctrl + F5 。
对缓存的影响: 强制缓存失效,协商缓存失效。

五、总结

在这里插入图片描述

参考于:https://juejin.cn/post/6974529351270268958#heading-27

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值