前言
在Chrome开发者工具页面中,有Network一栏，如下图所示：
一、浏览器Network的Size列
在浏览器开发者工具的Network的Size列会出现的三种情况：
- from memory cache
- from disk cache
- 资源本身大小（比如：13.6K）
二、三级缓存原理
- 先查找内存，如果内存中存在，从内存中加载；
- 如果内存中未查找到，选择硬盘获取，如果硬盘中有，从硬盘中加载；
- 如果硬盘中未查找到，那就进行网络请求；
- 加载到的资源缓存到硬盘和内存；
三、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