一、为什么要缓存
众所周知(在浏览器键入“全球网民数量”,发起网络请求后知),全球网民数量已近50亿。身为网民的一份子,本人每天都有很多问题,亟待大佬给出答案。这不刚刚就有了个问题,于是我打开Chorm(浏览器),搜索“全球网民数量”(发起请求),大佬(服务器)凭借他丰富的知识储备量告诉我说(响应),全球网民数量已经有46.6亿了。
我心满意足地离开了,但又众所周知鱼只有七秒钟的记忆,过了7秒钟,我又对全球网民数量产生了疑惑,企图找大佬解答我人生的困惑。如果只有我一条鱼,大佬还能耐心讲解,奈何鱼塘太大,日日如此大佬可承受不住,这时福务器的朋友刘览器挺身而出:“都是器字辈的,这活儿就包在我身上了!我把福哥哥的话记下来(缓存),下次我来跟这鱼说!”福务器大喜:“Hey,bro 你可真是我的好兄弟”
由此可见,
浏览器凭缓存这一举动减少了带宽,降低了网络负荷
二、缓存位置
俗话说的好,好脑瓜不如烂笔头,刘览器决定找个地方(缓存位置)把福务器说的话记下来,是哪几个地方呢?浅说一下(真的浅)
1、Service Worker
2、Memory Cache
3、Disk Cache
4、Push Cache
三、缓存机制
首先,先明确一下浏览器的缓存方式有两种:强缓存与协商缓存。
强缓存:不经过服务器,直接从缓存中读取数据
协商缓存:向服务器发送请求,由服务器决定是从缓存中读取数据,还是由服务器返回新的数据
浏览器请求过程:
我用浏览器搜索一个问题,浏览器首先就会向本地缓存发送一个HTTP请求,由于我是第一次请求此数据,缓存中必然是没有记录的,没有命中缓存,接着浏览器向服务器发送HTTP请求,服务器发出响应,响应头中包含缓存标识,浏览器将请求结果存入浏览器缓存中,并进行数据解析与页面渲染。
与强缓存有关的响应头:
Expires:缓存资源到期时间,在到期时间之内,可以由浏览器缓存直接响应HTTP请求,适用于HTTP1.0
缺点:修改电脑的系统时间,会影响缓存资源的有效性
Cache-Control:规定缓存资源的有效时间,以及其他一些属性,在HTTP1.1中开始出现。Cache-Cont
rol的优先级要高于Expires
例如我在浏览器搜索“鱼的记忆”,出现如下响应头:pubic表示允许代理服务器和浏览器进行资源缓存,max-age=432000表示缓存资源的有效时间为432000秒。
下次搜索“鱼的记忆时”,浏览器向缓存发起HTTP请求,并命中缓存,核对资源是否在有效期内,若在有效期,则直接从缓存中返回数据,这就是强缓存。若不在有效期,则开始协商缓存。
由此可见,强缓存只关心资源有效时间,而不在意资源是否有更新。
与协商缓存有关的响应头与请求头
1、响应头:Last-Modified 请求头:If-Modified-Since
Last-Modified:资源的最后修改时间
服务器在响应时,会有一个Last-Modified的响应头,浏览器下次请求时,If-Modified-Since的值就会设为服务器上次响应的Last-Modified的值,请求到达服务器时,服务器就会根据这个值与服务器端资源更新时间进行比对,如果自上一次响应后资源未更新,则返回状态码304,表示资源未更新,可以直接从缓存中取数据,浏览器收到304后,就去缓存中取数据。如果比对后发现自上次响应后,服务器资源有更新,则返回200状态码,重新从服务器中响应数据和缓存标识等,存入浏览器缓存。
缺点:Last-Modified的值精确到秒,若在秒内发生资源更新,则可能导致浏览器依旧从缓存中读取数据。
2、响应头:ETag 请求头:If-None-Match
ETag:若服务器资源更新,则ETag也会更新
流程与Last-Modified/If-Modified-Since一致,解决了秒内发生资源更新,无法识别的问题
总结来说
浏览器每次请求时,首先判断是否有缓存,若无缓存则向服务器发送请求,并将响应结果存至缓存。
若有缓存,第一选择都是走强缓存——直接访问浏览器缓存,若缓存数据有效(评判指标:有效时间,依据:Expires或Cache-Control)则直接从缓存返回数据;若缓存数据无效,则走协商缓存(解决服务器端有资源更新的问题)。
协商缓存的要点就是判断资源有无更新(依据:Last-Modified/If-Modified-Since,ETag/If-None-Match)。若无更新(304),依旧从缓存中返回数据,若有更新(200),则从服务器返回数据,并更新缓存。
如果觉得《浏览器缓存——强缓存与协商缓存》对你有帮助,请点赞、收藏,并留下你的观点哦!