Chrome 内存缓存 vs 磁盘缓存

我感兴趣的是铬内存缓存与磁盘缓存?我使用 webpack,公共块插件,并用 chunkhash 生成所有文件。

内存与磁盘缓存的区别。当我重新加载页面时,一些文件从内存缓存加载,一些从磁盘缓存加载(bundle.js 和 image. jpg 从内存缓存加载,css 从磁盘缓存加载)。有时候是不一样的。我们能控制吗,从哪里装货?内存缓存似乎比磁盘缓存快。

108404 次浏览

Chrome 实现了多层抽象的缓存。核心是 HTTP (浏览器)缓存-其他缓存机制的后端。一般来说,缓存可分为:

  • HTTP 缓存
  • 服务员缓存
  • 瞬间缓存

HTTP 缓存

通过网络发出的每个请求都由遵循 RFC的 HTTP 缓存进行代理。当第一次请求时,缓存被覆盖。资源由原始 url 键入。

服务员缓存

要正确地处理网络连接故障,可以使用 服务工作者。缓存和缓存存储将再次从磁盘中取出。

闪烁缓存

Blink 在两种创建模式(内存和简单(文件系统))中使用 Http 缓存作为后端。使用哪一个取决于缓存可以占用多少内存的全局限制。此外,当前的渲染器缓存获得最多的共享。缓存的是字体、图像和脚本。如果全局内存使用达到某个指定的阈值,则使用文件系统后端。

强制内存缓存

如果希望通过内存重写默认机制提供文件,可以实现自己的 ServiceWorker。使用 FileApi,可以将资源读取并存储到内存中的对象中。然后,重写提取事件将禁止从该全局对象提供的内容进行网络和文件读取。

就像他们的名字说的:

“内存缓存”存储和加载来自内存(RAM)的资源。所以这个速度要快得多,但它是非持久性的。在关闭浏览器之前,内容是可用的。

“磁盘缓存”是持久的。缓存的资源存储和加载到磁盘和从磁盘。

简单测试: 打开 Chrome 开发工具/网络。多次重新加载一个页面。表中的“ Size”列将告诉您某些文件是“从内存缓存”加载的。 现在关闭浏览器,再次打开开发人员工具/网络,并再次加载该页面。所有缓存文件现在都是“从磁盘缓存”加载的,因为您的内存缓存是空的。