浏览器缓存机制

465 阅读4分钟

缓存机制

1.浏览器发送请求前,根据请求头的expirse 和 cache-control判断是否命中强缓存策略,如果命中,直接从缓存获取资源,并不会发送请求。如果没有命中,则进入下一步。

2.没有命中强缓存规则,浏览器会发送请求,根据请求头的last-modified和etag判断是否命中协商缓存,如果命中,直接从缓存获取资源。如果没有命中,则进行下一步。

3.如果前两者都没有吗,命中,则直接从服务端获取资源

强缓存

不会从服务器发送请求,直接从缓存中读取资源

强缓存就是向浏览器查找该情求结果,并根据该结果的缓存规则决定是否使用该缓存结果的过程,强缓存存在的情况主要有三种

  • 第一次情求,不存在缓存结果和缓存标识,直接向服务器发送请求

  • 存在缓存标识和缓存结果,但是已经失效,进行下一步去匹配协商缓存(下面描述)

  • 存在缓存结果和缓存标识,且该结果尚未失效,强制缓存生效,直接返回该结果

强缓存规则

当浏览器想服务器发送请求时,服务器会将缓存规则放入HTTP响应报文的Http请求头中和请求结果一起返回给浏览器,控制强缓存的字段分别是ExpiresCache-Control, Cache-Control的优先级比Expires

Expires

http1.0的头字段 缓存过期时间,用来指定资源到期的时间,是服务器端的具体的时间点,也就是说,Expires = max-age + 请求时间,需要和last-modified结合使用。Expires是Web服务器响应消息头字段,在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据,无需再次请求

cache-control

http1.1的头字段 在http1.1 中,Cache-Control是重要的规则,主要用于控制网页缓存,主要取值为:

  • pubilc: 所有内容都将被缓存(客户端和代理服务器都可缓存)
  • private: 所有内容只有客户端可以缓存,Cache-Control的默认取值
  • no-cache: 客户端 缓存内容,但是是否使用缓存则需要经过协商缓存来验证决定
  • no-store: 所有内容都不会被缓存,即不使用协商缓存
  • max-age: 缓存在xxx秒后失效

form Disk cache 和 form memory cache

form memory cache 不情求网络资源,资源在内存中,一般脚本、字体、图片会存在内存中

form disk cache 不情求网络资源,在磁盘中,一般非脚本会存在内存当中,如css等

协商缓存

协商缓存就是强制缓存失效后,浏览器携带缓存标识向服务器发起情求,由服务器根据缓存标识是否使用缓存的过程,主要有以下两种情况

  • 协商缓存生效,返回304和Not modefied
  • 协商缓存失效,返回200和请求结果

Last-modified和if-Modified-Since

http1.0的头字段

  1. 浏览器首先发送一个请求,让服务器在response Header中返回请求的资源上次更新时间,就是last-modified, 浏览器会缓存下这个时间。

2.然后浏览器在下次情求中,response header中带上 if-modified-since(last-modified的值)。 根据浏览器发送的修改时间和服务端的修改时间进行对比,一致的话代表资源没有改变,服务端返回正文为空的响应,让浏览器中缓存中读取资源,这就大大减小了情求的消耗。

由于last-modified依赖的是保存的绝对时间,还是会出现误差的情况:

1.保存的时间是以秒为单位的,1秒内多次修改是无法捕捉到的; 2.各机器读取到的时间不一致,就会有出现误差的可能,为了改善这个问题提出使用etag

ETag 和 if-None-match

http1.1的头字段

etag是http协议提供的若干机制中的一种web缓存验证机制,并且允许客户端进行协商缓存。生成etag常用的方法包括对资源内容使用抗碰撞散列寒暑表,使用最近修改的时间戳的哈希值,甚至一个版本号。

  • 浏览器会先发送一个请求得到etag的值,然后再下一次请求在request header中带上if-none-match

  • 通过发送的etag的值和服务端重新生成的etag值进行比较,如果一致代表资源没有改变,服务端返回正文为空的响应,告诉浏览器从缓存中读取资源。