webpack Chrome内存缓存与磁盘缓存

kcwpcxri  于 2023-08-06  发布在  Webpack
关注(0)|答案(3)|浏览(159)

我对chrome内存缓存和磁盘缓存感兴趣?我使用webpack,common chunks插件,并使用chunkhash生成所有文件。
内存与磁盘缓存有何不同。当我重新加载页面时,一些文件从内存缓存加载,一些从磁盘缓存加载(bundle.js和image.jpg从内存缓存加载,css从磁盘缓存加载)。有时候不一样。我们能控制它,选择从哪里加载什么吗?内存缓存似乎比磁盘缓存更快。

mjqavswn

mjqavswn1#

就像他们的名字说:
“存储器高速缓存”将资源存储到存储器(RAM)和从存储器(RAM)加载资源。所以这是快得多,但它是非持久性的。在关闭浏览器之前,内容都是可用的。
“磁盘缓存”是永久性的。缓存的资源存储在磁盘上,并从磁盘加载。
简单测试:打开Chrome开发工具/网络。多次重新加载页面。表列“大小”将告诉您一些文件是“从内存缓存”加载的。现在关闭浏览器,再次打开开发者工具/网络并再次加载该页面。所有缓存的文件现在都是从磁盘缓存加载的,因为你的内存缓存是空的。

dm7nw8vv

dm7nw8vv2#

Chrome在许多抽象级别上实现了缓存。核心是HTTP(浏览器)缓存-其他缓存机制的后端。通常,缓存可以分为:

  • HTTP缓存
  • Service Worker缓存
  • Flink 缓存
    HTTP缓存

通过网络发出的每个请求都由遵循RFC的HTTP缓存代理。当第一次请求时,缓存将被覆盖。资源由源URL键控。

服务工作缓存

要优雅地处理网络连接故障,可以使用Service Workers。缓存和缓存存储将再次从磁盘中取出。

** Flink 缓存**

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

强制进入内存缓存

如果您希望从内存覆盖默认机制来提供文件,您可以实现自己的Service Worker。使用File API,可以读取资源并将其存储到内存中的对象中。那么重写fetch事件将禁止使用从该全局对象提供的内容进行网络和文件读取。

juzqafwq

juzqafwq3#

在Google Chrome中,有两种主要的缓存类型:内存缓存和磁盘缓存。这些缓存机制共同工作,以优化网页的性能,并减少重复下载资源的需要。
内存缓存:

  • 内存缓存,顾名思义,是驻留在计算机RAM(随机存取存储器)中的缓存。
  • 它存储最近访问的Web资源的副本,例如HTML文件,图像,CSS,JavaScript等。
  • 与磁盘缓存相比,内存缓存提供更快的资源访问,因为从RAM阅读数据比从硬盘驱动器或SSD读取快得多。
  • 由于RAM有限,内存缓存的容量小于磁盘缓存。
  • 当您关闭浏览器或其他进程需要分配的内存时,内存缓存将被清除。

磁盘缓存:

  • 磁盘缓存是驻留在计算机硬盘驱动器或SSD(固态驱动器)上的缓存。
  • 它充当不适合内存缓存或内存中当前不需要的缓存资源的辅助存储。
  • 磁盘高速缓存的容量比内存高速缓存大,但访问时间较慢,因为它涉及从存储驱动器阅读数据。
  • 即使关闭浏览器,缓存的资源也会保留在磁盘缓存中,以便将来访问同一网站或在页面之间来回导航时使用。

总之,存储器高速缓存对于频繁访问的资源更快且更有效,并且当需要存储器空间时,其被更频繁地清除。另一方面,磁盘缓存提供了更大的存储容量,即使在浏览器关闭后也会保留缓存的资源,从而允许在后续访问时更快地访问。
内存缓存和磁盘缓存的结合使Chrome(和其他现代浏览器)能够在可用时快速提供缓存资源,从而减少需要通过网络获取的数据量,从而提供更流畅的浏览体验。这有助于改善页面加载时间和整体性能。

相关问题