缓存

[homobulla]

浏览器的缓存

缓存在宏观上分两类：

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

微观上分三类：

• 浏览器缓存：通常我们在开发阶段经常说的“清除浏览器缓存"
• 代理服务器缓存：类似于一个大型的浏览器缓存，只不过被很多人使用
• 网关缓存：也被称为代理缓存或反向代理缓存，网关也是一个中间服务器，网关缓存一般是网站管理员自己部署，从让网站拥有更好的性能。
  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.强缓存阶段

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.协商缓存阶段

利用这两个字段浏览器可以进入协商缓存阶段，当浏览器再次试图访问这个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"

最后一张图展示过程：

参考资料：

1. 浅谈 web 缓存
2. 缓存详解
3. http 缓存