文章目录

前言一、浏览器Network的Size列二、三级缓存原理三、HTTP状态码及区别四、不同浏览器资源加载策略

前言

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

一、浏览器Network的Size列

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

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

二、三级缓存原理

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

三、HTTP状态码及区别

200 from 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详解见：/franknotbad/article/details/79399809

以上是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比较快的原因之一

参考链接：

/p/8332da83955d

/lianxin19900610/article/details/82417233

如果觉得《Chrome中的from memory cache与from disk cache》对你有帮助，请点赞、收藏，并留下你的观点哦！