# from memory cache 与 from disk cache

谈谈network中的缓存细节:from memory cache 与 from disk cache

# 一、浏览器Network的Size栏

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

  • from memory cache
  • from disk cache
  • 资源本身大小(比如:13.6K)

# 二、3级缓存原理

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

# 三、HTTP状态码及区别

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

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

  • 304 Not Modified 访问服务器,发现数据没有更新,服务器返回此状态码。然后从缓存中读取数据。

状态 类型 说明
200 form memory cache 不请求网络资源,资源在内存当中,一般脚本、字体、图片会存在内存当中
200 form disk cache 不请求网络资源,在磁盘当中,一般非脚本会存在内存当中,如css等
200 资源大小数值 从服务器下载最新资源
304 报文大小 请求服务端发现资源没更新,使用本地资源

一般样式表会缓存在磁盘中,不会缓存到内存中,因为css样式加载一次即可渲染出页面。但是脚本可能会随时执行,如果把脚本存在磁盘中,在执行时会把该脚本从磁盘中提取到缓存中来,这样的IO开销比较大,有可能会导致浏览器失去响应。

# 四、几种状态的执行顺序

现加载一种资源(例如:图片):

访问 -> 200 -> 退出浏览器 -> 再进来 -> 200(from disk cache) -> 刷新 -> 200(from memory cache)

原文链接 (opens new window)

Last Updated: 4/24/2020, 1:44:36 PM