memory cache 和 disk cache

from memory cache 和 from disk cache

最近在优化Vue项目，因此打开网页，按下F12。发现很多js，css得下载来自于 memory cache，引申出问题：请求时浏览器缓存 from memory cache 和 from disk cache 的依据是什么，哪些数据什么时候存放在 Memory Cache 和 Disk Cache中？

显性新鲜度

浏览器在加载一个网页时，为了尽可能地保证其快速加载，因此设置了一些缓存地策略。经过搜索，记录一下浏览器地缓存策略（使用chrome测试）。

首先，HTTP缓存的核心机制是 Freshness新鲜度，即允许服务器指定可以重用响应的生存期。(也就是缓存有效期)

其次，有两种基本方法可以设置Freshness：Response Header中的Expires 字段和 Cache-Control: max-age 字段。

此图以 Vue的cdn资源为例子:

也就是说，当我们访问一个网站时，浏览器作为中间通信媒介向该网址发出了一系列JS,Image,css，媒体资源的下载请求，浏览器会首先在三次握手协议中判断请求 Response Header 中的Expires字段，如果 Expires=0 或者Expires=no-store，那么表示该资源A在服务器上已过时或不存在，那么就会重新从网站所在服务器下载资源A。 (A仅仅作为一个代号表示，可以是任意一个css，js等文件)

如果 Expires=0时，但同时字段 Cache-Control: max-age=60中设置了一个数值，那么表示该资源A是有效的，但是只在发起请求后的接下来60秒内有效，资源A会缓存在你的电脑中。一旦超时，就需要再次从该服务器下载此资源。

计算一下：max-age=31536000 等于缓存时间是多长呢?

毕竟保存在电脑中的资源，无需下载，浏览器加载起来是非常快的。

启发式新鲜度

对于网站来说，每一个js， css等等资源都要设置 Expires， Cache-Control 显然太复杂了，因此浏览器还有一条规则 启发式缓存 ，能够最大效率的利用缓存，自动缓存。

如果Response 没有诸如Expires或Cache-Control: max-age这样的显式新鲜度信息，HTTP仍然允许使用所谓的启发式新鲜度来对其进行缓存。这意味着缓存可以刷新有效期的，并且这很有用，因为服务器通常不为响应分配明确的刷新有效期，从而损害了效率。没有它，Web缓存就永远不会开始。

缓存要计算有效期通常会需要Last-Modified，因此他们总是成对出现。

对于一些状态码，默认情况下允许启发式缓存；例如200 OK。如果某一状态代码不允许，也可以通过设置Cache-Control: public 将其打开。

经过测试:

所有浏览器缓存都将启发式缓存应用于状态码 200 OK。除Edge以外的所有对象都将其应用于203 Non-Authoritative Information和410 Gone响应。

Safari浏览器也适用于它204 No Content，404 Not Found，405 Method Not Allowed，414 URI Too Long，和501 Not Implemented-所有的状态代码允许通过HTTP。

参考资源

Browser Caching
expiration.model
cloud caching
HTTP缓存头
dist cache加载机制