点击蓝字,一起变强
本文知识结构:
今天二毛下了个晚班,坐在异乡寥寥无几人的地铁上,一种“他乡安置不了灵魂,故乡放置不了肉身”的感觉袭来,心情有些许低落。
他似玩非玩着手机,突然被几条信息吸引了注意力:“热干面回来了”、“全国绝大部分省宣布开学了”...
二毛突然心情释怀,想起一句话:冬天已经过去,春天还会远吗?一切都在慢慢变好,包括自己。
回到出租屋,二毛突然看到二丫一脸生气的样子经过,于是凑上前去关心慰问。
1 HTTP协议的组成部分
开始之前,首先我们需要大概了解下 HTTP 协议传输信息的两个组成部分:请求和响应。
1.1 请求
分为:请求行,请求头,请求体。
当客户端向服务端发起请求时,内容层次如下:
其中请求体是服务器真正要接收处理的用户数据;请求行和请求头的一些参数值,主要是用于告诉服务器如何处理这次请求,比如:
根据content-length的值,服务器就知道请求体的长度
根据host的值,服务器就知道要将请求转发给哪个虚拟主机
......
1.2 响应
分为:响应行,响应头,响应体。
当服务端响应资源给客户端时,内容类别如下:
其中响应体是真正展示给用户的内容(一般是html,交给浏览器渲染);响应行和响应头的一些参数值,主要告诉浏览器如何展示响应体的内容,比如:
根据content-type的值,浏览器就知道是将这些内容按图片格式展示,还是以文本方式形式
根据content-length的值,浏览器就知道响应内容的长度
......
1.3 缓存相关的参数
我们主要挑缓存相关的参数来讲:状态码,头部字段。
1.3.1 状态码
这里指的就是服务端的响应状态码,状态码主要分为以下五种:
其中,重要的缓存相关状态码如下:
200 OK: 代表资源被浏览器成功接收,或资源直接从本地获取成功。
304 Not Modified:代表服务端允许请求访问资源,但访问资源未满足条件,不需要将资源响应返回给客户端。
1.3.2 头部字段
认真阅读的朋友们可能会发觉到,上面请求头和响应头的参数怎么有些是一样的(上文的content-type)。的确,其实请求头和响应头都叫做头部字段。头部字段分为以下四种:
1 请求首部字段(Request Header Fields)
从客户端向服务器端发送请求报文时使用的首部。
2 响应首部字段(Response Header Fields)
从服务器端向客户端返回响应报文时使用的首部。
3 通用首部字段(General Header Fields)
请求报文和响应报文两方都会使用的首部。
4 实体首部字段(Entity Header Fields)
针对请求报文和响应报文的实体部分使用的首部。补充了资源内容更新时间等与实体有关的信息。
关于缓存,我们需要关注这几种头部信息:
请求相关:If-Modified-Since,If-None-Match
响应相关:ETag,Last-Modified,Expires,Cache-Control
2 浏览器缓存类型
正如我前面说到的,浏览器缓存有两种,分别是:强缓存和协商缓存。
2.1 强缓存
定义:
顾名思义,就是浏览器强制使用本地缓存来作为资源展示。
在谷歌浏览器按 F12 之后的 network 选项中可以看出:命中强缓存的请求,会得到200状态码,由于字段是从本地获取的,所以size 字段处会显示 from memory cache 或 from disk cache。
强缓存相关的头部信息:
看响应头部字段:Expires 和 Cache-Control。
Expires:例如【expires: Sun, 03 May 2020 15:02:48 GMT】,标明了这个资源的过期时间,浏览器下一次请求时会对这个时间进行判断,如果没超过这个时间就会命中强缓存,超过了则没命中并重新发起请求。
Cache-Control:例如【cache-control: max-age=2592000】,标明了这个资源的过期倒计时,这个倒计时浏览器也会存储下来,浏览器下一次请求时会对倒计时进行判断,如果倒计时未完就会命中强缓存,超过了则反之。
2.2 协商缓存
定义
顾名思义,就是要跟服务器进行协商要不要用缓存。
在谷歌浏览器按 F12 之后的 network 选项中可以看出:命中协商缓存的请求,会得到304状态码,然后浏览器就会从本地缓存中读取资源。
协商缓存相关的头部信息
既然是协商,所以此类的头部信息是成双成对出现的:
响应头的 ETag 与 请求头的 If-None-Match
响应头的 Last-Modified 与 请求头的If-Modified-Since
ETag和If-None-Match:
Etag是上一次加载资源时,服务器返回的响应头,是对该资源的一种唯一标识,只要资源有变化,Etag就会重新生成。浏览器在下一次加载资源向服务器发送请求时,会将上一次返回的Etag值放到请求头里的If-None-Match字段里,服务器接受到If-None-Match的值后,会拿来跟该资源文件的Etag值做比较,如果相同,则表示资源文件没有发生改变,命中协商缓存。
Last-Modified和If-Modified-Since:
Last-Modified是该资源文件最后一次更改时间,服务器会在响应头里返回,同时浏览器会将这个值保存起来,在下一次发送请求时,放到请求头里的If-Modified-Since里,服务器在接收到后也会做比对,如果相同则命中协商缓存。
举个例子。
响应头:
请求头:
ETag和Last-Modified的作用和用法也是差不多,说一说他们的区别。
1 在精确度上,Etag要优于Last-Modified。Last-Modified的时间单位是秒,如果某个文件在1秒内改变了多次,那么他们的Last-Modified其实并没有体现出来修改,但是Etag每次都会改变确保了精度;如果是负载均衡的服务器,各个服务器生成的Last-Modified也有可能不一致。
2 在性能上,Etag要逊于Last-Modified,毕竟Last-Modified只需要记录时间,而Etag需要服务器通过算法来计算出一个hash值。
3 在优先级上,服务器校验优先考虑Etag。
3 浏览器缓存过程示意图
注意:
两者的共同点是,都是从客户端缓存中读取资源;区别是强缓存不会发请求,协商缓存会发请求。
关于优先级:先判断强缓存,后判断协商缓存。
判断强缓存的时候,如果有 Cache-Control ,则只通过 Cache-Control 来判断是否有强缓存;如果没有这个 Cache-Control 这个字段,才拿 Expire 字段进行判断。
判断协商缓存的时候,如果有 If-None-Match ,则只通过If-None-Match 来判断是否有协商缓存;如果没有 If-None-Match 这个字段,才拿 If-Modified-Since。
https 也是同样的缓存原理,因为 https 只是在 http 的基础上套了SSL/TLS的加密层,其他不变。
4 针对缓存的一些用户操作
地址栏访问,链接跳转是正常用户行为,将会触发浏览器缓存机制;
F5刷新,浏览器会设置max-age=0,跳过强缓存判断,会进行协商缓存判断;
ctrl+F5刷新,跳过强缓存和协商缓存,直接从服务器拉取资源。
二丫随即拿出笔记本按了下 ctrl+F5 ,果不其然,网站系统正常更新了图片。
我是二毛,一个在大城市漂泊的程序猿。
往期推荐
spring大厂高频面试题及答案【吊打面试官】Mysql大厂高频面试题!!!Redis高频面试题及答案大白话布隆过滤器,又能和面试官扯皮了~天天用Redis,持久化方案有哪些你知道吗?天天写 order by,你知道Mysql底层执行流程吗?万字长文带你入门Zookeeper!!!求你了,别再问我Zookeeper如何实现分布式锁了!!!Mysql性能优化:为什么count(*)这么慢?Mysql性能优化:如何给字符串加索引?Mysql中的三类锁,你知道吗?Mysql性能优化:什么是索引下推?Mysql性能优化:为什么要用覆盖索引?