浏览器的缓存

缓存在宏观上分两类:

  • 私有缓存: 用户专享的,各级代理不能缓存的缓存
  • 共享缓存: 能被各级代理缓存的缓存

微观上分三类:

  • 浏览器缓存:通常我们在开发阶段经常说的“清除浏览器缓存"
  • 代理服务器缓存:类似于一个大型的浏览器缓存,只不过被很多人使用
  • 网关缓存:也被称为代理缓存或反向代理缓存,网关也是一个中间服务器,网关缓存一 般是网站管理员自己部署,从让网站拥有更好的性能。 CDNS(网络内容分发商)分布网 关缓存到整个(或部分)互联网上,并出售缓存服务给需要的网站,比如国内的七牛云 、又拍云都有这种服务。

浏览器的缓存策略

页面的缓存状态由Response Headers决定。

Age:23146
Cache-Control:public,max-age=2592000  (public:指定响 应会被缓存,并且在多用户间共享,   max-age:设置缓存最大的有效时间)
Date:Tue, 28 Nov 2017 12:26:41 GMT
ETag:W/“5a1cf09a-63c6”   (基于内容生成)
Expires:Thu, 28 Dec 2017 05:27:45 GMT
Last-Modified:Tue, 28 Nov 2017 05:14:02 GMT    ( 服务器端文件的最后 修改时间)
Vary:Accept-Encoding

1.强缓存阶段(本地缓存:200)

Expires 是 HTTP/1.0 中的定义缓存的字段,它规定了缓存过期的一个绝对时间 。Cache-Control:max-age=2592000 是 HTTP/1.1 定义的关于缓存的字段,它规定了缓存过 期的一个相对时间。优先级上当然是版本高的优先了,max-age > Expires。

这就是强缓存阶段,当浏览器再次试图访问这个 CSS 文件,发现有这个文件的缓存,那么 就判断根据上一次的响应判断是否过期,如果没过期,使用缓存。加载文件,OVER!

多说一点:关于缓存是从磁盘中获取还是从内存中获取,查找了很多资料,得出了一个 较为可信的结论:Chrome 会根据本地内存的使用率来决定缓存存放在哪,如果内存使用率 很高,放在磁盘里面,内存的使用率很高会暂时放在内存里面。这就可以比较合理的解释了 为什么同一个资源有时是 from memory cache 有时是 from disk cache 的问题了。

2.弱缓存阶段(协商缓存:304)

利用这两个字段浏览器可以进入协商缓存阶段,当浏览器再次试图访问这个 CSS 文件,发 现缓存过期,于是会在本次请求的请求头里携带 If-Moified-Since 和 If-None-Match 这 两个字段,服务器通过这两个字段来判断资源是否有修改,如果有修改则返回状态码 200 和新的内容,如果没有修改返回状态码 304,浏览器收到 200 状态码,该咋处理就咋处理( 相当于首次访问这个文件了),发现返回 304,于是知道了本地缓存虽然过期但仍然可以用 ,于是加载本地缓存。然后根据新的返回的响应头来设置缓存。(这一步有所差异,发现不 同浏览器的处理是不同的,chrome 会为 304 设置缓存,firefox 则不会)😑

具体两个字段携带的内容如下(分别和上面的 Last-Modified、ETag 携带的值对应):

If-Moified-Since: Tue, 28 Nov 2017 05:14:02 GMT
If-None-Match: W/“5a1cf09a-63c6”

最后一张图展示过程:

示意图