浏览器缓存
浏览器的缓存机制也就是我们常说的 HTTP 缓存机制,是浏览器根据接收到的 HTTP 报文中缓存标识对资源进行缓存的一种机制。能够有效的减轻服务器压力和减少带宽使用。
缓存过程分析:
浏览器与服务器之间进行通信的方式为应答模式。即 : 浏览器发起 HTTP 请求 <=> 服务器响应该请求。
当浏览器在第一次向服务器发起请求后并获得响应后,在响应报文中拿到
HTTP头中缓存标识和请求结果。根据缓存标识来决定是否进行浏览器缓存。若进行缓存,则将请求结果和缓存标识存入浏览器缓存中,简单的过程如下图:
缓存模型1 由上图我们可知:
- 浏览器每次发起 HTTP 请求时,都会在浏览器缓存中查找该请求的缓存结果以及缓存标识
- 浏览器每次获得服务端相应后,都会将请求结果和缓存标识存入浏览器缓存中
缓存方法
通常来说,我们根据是否需要向服务器重新发起 HTTP 请求将缓存过程分成两个部分,分别是强制缓存和协商缓存。
强制缓存
强制缓存就是向浏览器缓存查找该请求的缓存结果,并根据浏览器缓存中请求结果的缓存规则来决定是否使用该浏览器缓存的过程。
强制缓存情况
强制缓存的情况主要有如下三种:
1. 不存在该缓存结果和缓存标识
不存在该缓存结果和缓存标识,则强制缓存失效,直接向服务器发起请求(跟第一次发起请求一致),如下图:
2. 存在该缓存结果和缓存标识,且该结果尚未失效
存在该缓存结果和缓存标识,且该结果尚未失效,强制缓存生效,直接返回该结果,如下图:
3. 存在该缓存结果和缓存标识,但该结果已失效
存在该缓存结果和缓存标识,但该结果已失效,强制缓存失效,则使用协商缓存(下文分析),如下图:
强制缓存规则
控制强制缓存的字段分别是Expires和Cache-Control,其中Cache-Control的优先级 > Expires的优先级
Expires
Expires是HTTP/1.0控制网页缓存的字段,其值为服务器返回该请求结果缓存的到期时间,即再次发起该请求时,如果客户端的时间小于Expires的值时,直接使用缓存结果。
Expires 是 HTTP/1.0 的字段,但是现在浏览器默认使用的是 HTTP/1.1,那么在 HTTP/1.1 中网页缓存还是否由 Expires 控制?
到了HTTP/1.1,Expires已经被Cache-Control替代。
原因在于 Expires 控制缓存的原理是使用客户端的时间与服务端返回的时间做对比,那么如果客户端与服务端的时间因为某些原因(例如时区不同;客户端和服务端有一方的时间不准确)发生误差,那么强制缓存则会直接失效,这样的话强制缓存的存在则毫无意义。
Cache-Control
在HTTP/1.1中,Cache-Control是最重要的规则,主要用于控制网页缓存,主要取值为:
* public:所有内容都将被缓存(客户端和代理服务器都可缓存)
* private:所有内容只有客户端可以缓存,Cache-Control的默认取值
* no-cache:客户端缓存内容,但是是否使用缓存则需要经过协商缓存来验证决定
* no-store:所有内容都不会被缓存,即不使用强制缓存,也不使用协商缓存
* max-age=xxx (xxx is numeric):缓存内容将在xxx秒后失效
例子
由上面的例子我们可以知道:
HTTP 响应报文中expires的时间值,是一个绝对值
HTTP 响应报文中Cache-Control为 max-age=600(单位为秒),是相对值
Cache-Control的优先级比Expires高,浏览器将根据Cache-Control的值进行缓存,意思就是说在 600 秒内再次发起该请求,则会直接使用缓存结果,强制缓存生效。
协商缓存
协商缓存是在强制缓存失效后,浏览器携带缓存标识向服务器发起请求,由服务器根据缓存标识决定是否使用缓存的过程
协商缓存情况
1. 协商缓存生效
协商缓存生效,返回 304,如下图:
2.协商缓存失效
协商缓存失效 ,返回 200 状态码和请求结果,如下图:
协商缓存规则
控制协商缓存的字段分别是Last-Modified / If-Modified-Since和Etag / If-None-Match,其中Etag / If-None-Match的优先级 > Last-Modified / If-Modified-Since的优先级
Last-Modified / If-Modified-Since
- Last-Modified:服务器响应请求时,返回该资源文件在服务器最后被修改的时间,如下图:
- If-Modified-Since:客户端再次发起该请求时,携带上次请求返回的Last-Modified值,通过此字段值告诉服务器该资源上次请求返回的最后被修改时间,如下图:
当服务器收到请求时,会检查请求头中是否含有If-Modified-Since字段。若存在,则会根据If-Modified-Since字段的值与服务器中此资源被修改的最后时间做对比,若:
- 资源最后被修改时间 大于 If-Modified-Since的值,则返回状态码为200,重新返回资源;
- 资源最后被修改时间**小于** If-Modified-Since的值,则返回状态码304,代表此资源在服务器中无更新,继续使用浏览器缓存中的内容
Etag / If-None-Match
Etag:服务器响应请求时,返回当前资源文件的一个唯一标识(由服务器生成),如下图:
Etag If-None-Match:客户端再次发起该请求时,携带上次请求返回的唯一标识Etag值,通过此字段值告诉服务器该资源上次请求返回的唯一标识值,如下图:
当服务器收到请求时,会检查请求头中是否含有If-None-Match。若存在,会根据If-None-Match字段的值与服务器上此资源的Etag值进行比较。
- 两个值**一致,则返回状态码304**,代表资源无更新,继续使用浏览器缓存文件;
- 两个值**不一致,则返回状态码200**,重新返回资源文件
浏览器缓存位置
思考一下,浏览器会将文件缓存在什么位置呢?
我们以博客的请求为例,状态码为灰色的请求则代表使用了强制缓存,其中的Size的值记录了该缓存存放的位置。分别为from memory cache 和 from disk cache。如下图:
内存缓存(from memory cache)
内存缓存具有两个特点,分别是快速读取和时效性。
- 快速读取:内存缓存会将编译解析后的文件,直接存入该进程的内存中,占据该进程一定的内存资源,以方便下次运行使用时的快速读取
- 时效性:一旦该进程关闭,则该进程的内存则会清空
硬盘缓存(from disk cache)
- 硬盘缓存则是直接将缓存写入硬盘文件中,
- 读取缓存需要对该缓存存放的硬盘文件进行 I/O 操作,然后重新解析该缓存内容,速度比内存缓存慢
读取顺序
浏览器读取缓存的顺序为memory cache => disk cache
注:
- 浏览器会在js 文件和图片文件等解析执行完成后直接存入内存缓存中,当我们刷新页面时浏览器只需直接从内存缓存中读取文件
- css 文件则会存入硬盘文件中,所以每次渲染页面都需要从硬盘缓存中读取
总结
- 强制缓存优先于协商缓存进行
- 若强制缓存(Expires 和 Cache-Control)生效则直接使用缓存,若不生效则进行协商缓存(Last-Modified / If-Modified-Since 和 Etag / If-None-Match),
- 协商缓存由服务器决定是否使用缓存。
- 若协商缓存生效,返回状态码304,使用浏览器缓存文件;
- 若协商缓存失效,返回状态码200,重新获取请求结果,再存入浏览器缓存中;
主要过程如下图: