浏览器资源请求中 disk cache 与 memory cache

浏览器资源请求中 disk cache 与 memory cache

在浏览器 NetWork 中，总是会看到有 memoryCache 与 diskCache，只是大概知道它们是什么，
这里有时间专门去查看了多份资料，明白了更多他们的区别和特质，以问答的形式记录一下；
图片就不放了，可以找个网站在 NetWork 上自己看看。

memory cache 与 disk cache 分别是什么？

• memory cache 是浏览器存储在 RAM 中的缓存资源
• disk cache 是浏览器缓存在设备磁盘内存中的资源

memory cache 与 disk cache 各自的特点是什么？

• memory cache

  读取速度快、存储空间小、存储的文件 size 一般也较小、时效较短当浏览器 tab 关闭即释放;

• disk cache

  读取速度较快(小于 memory cache)、存储空间大、存储的文件 size 一般较大、时效较长当浏览器关闭仍然存储在磁盘中;

浏览器分别在什么时候使用这两个缓存？

• memory cache

  频繁访问的派生资源，包括：图片、js 脚本、css 等较小 size 文件时，大多会存储在 memory cache 中;
  当 tab 栏过多，内存不够时，最近最少使用 tab 栏的缓存将通过LRU算法清除；

• disk cache

  不经常改动的资源，包括：图片、js、css 等较大 size 文件时，一般通过服务端通过 cache-control 控制；

memory cache 与 disk cache 由谁来控制？

• memory cahce 由浏览器程序控制，开发人员无法控制，也不受 HTTP 协议头的约束，除了no-store；
• disk cache 由服务端控制，可通过配置 nginx 等服务器 或 在服务端代码中修改 cache-control 存储配置；

为什么 图片、js、css 缓存有些是 memory cache ，有些是 disk cache？

图片、js 在首次访问后，便会将其存入memory cache，并且基本都会在disk cache中也会有备份；
在刷新网页的时候，将会首先从memory cache中获取资源；memory cache中没有，会继续到disk cache寻找；
当我们关闭tab，memory cache便清除了，如果我们再次访问该网站，将会从disk cache获取图片和js资源；
css基本上都是disk cache；
html文档不会被缓存；

一些规律

• 图片、js 等文件首选会使用 memory cache 缓存;当文件过大或者内存不足时，将使用 disk cache 进行缓存；
• 浏览器通常会根据资源的类型和使用频率来决定使用哪种缓存方式;
• CSS 和 JavaScript 文件通常会被缓存以加快页面加载速度;
• 而图片等媒体资源则可能根据需要选择不同的缓存方式 ‌;

遗留问题

最终因为没有浏览器相关存储原理的具体资料，可能也不是一两条规则判断什么时候是memory cache 或 disk cache，
后续将需要进一步学习相关的两者缓存的资料