Chrome中的from memory cache与from disk cache

前言

在Chrome开发者工具页面中,有Network一栏，如下图所示：

一、浏览器Network的Size列

在浏览器开发者工具的Network的Size列会出现的三种情况：

• from memory cache
• from disk cache
• 资源本身大小（比如：13.6K）

二、三级缓存原理

1. 先查找内存，如果内存中存在，从内存中加载；
2. 如果内存中未查找到，选择硬盘获取，如果硬盘中有，从硬盘中加载；
3. 如果硬盘中未查找到，那就进行网络请求；
4. 加载到的资源缓存到硬盘和内存；

三、HTTP状态码及区别

• 200 form memory cache

  不访问服务器，一般已经加载过该资源且缓存在了内存当中，直接从内存中读取缓存。浏览器关闭后，数据将不存在（资源被释放掉了），再次打开相同的页面时，不会出现from memory cache。

• 200 from disk cache

  不访问服务器，已经在之前的某个时间加载过该资源，直接从硬盘中读取缓存，关闭浏览器后，数据依然存在，此资源不会随着该页面的关闭而释放掉下次打开仍然会是from disk cache。

• 200 大小(如3.4k)

  访问服务器，size显示为实际资源的大小

• 304 Not Modified

  访问服务器，发现数据没有更新，服务器返回此状态码。然后从缓存中读取数据。这种在请求头中有两个请求参数：If-Modified-Since 和 If-None-Match。304详解见：https://blog.csdn.net/franknotbad/article/details/79399809

  状态码	类型	说明
  200	form memory cache	不请求网络资源，资源在内存当中
  200	form disk ceche	不请求网络资源，在磁盘当中
  200	资源大小数值	从服务器下载最新资源
  304	报文大小	请求服务端发现资源没有更新，使用本地资源

以上是chrome在请求资源是最常见的两种http状态码，由此可见样式表一般在磁盘中，不会缓存到内存中去，因为css样式加载一次即可渲染出网页。但是脚本却可能随时会执行，如果脚本在磁盘当中，在执行该脚本需要从磁盘中取到内存当中来，这样的IO开销是比较大的，有可能会导致浏览器失去响应。

四、不同浏览器资源加载策略

以上的数据及统计都是在chrome浏览器下进行的，在Firefox下并没有from memory cache以及from disk cache的状态展现，相同的资源在chrome下是from disk/memory cache，但是Firefox统统是304状态码，即Firefox下会缓存资源，但是每次都会请求服务器对比当前缓存是否更改，chrome一般不直接请求服务器(当请求头中包含参数If-Modified-Since 和 If-None-Match时，会请求服务器进行资源版本比对)，直接拿过来用，这也是为啥chrome比较快的原因之一

参考链接：
https://www.jianshu.com/p/8332da83955d
https://blog.csdn.net/lianxin19900610/article/details/82417233