Chrome内存缓存与磁盘缓存

谷歌浏览器 Webpack

小胖阳光

2020-03-23

我对Chrome内存缓存与磁盘缓存有兴趣吗?我使用webpack,常见的块插件,并使用chunkhash生成我的所有文件。

内存与磁盘缓存有何不同?当我重新加载页面时,某些文件是从内存缓存中加载的,而某些是从磁盘缓存中加载的(从内存缓存中的bundle.js和image.jpg以及从磁盘缓存中的css)。有时情况有所不同。我们可以控制它,选择从哪里加载什么?内存缓存似乎比磁盘缓存快。

第2767篇《Chrome内存缓存与磁盘缓存》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

2个回答
樱斯丁 2020.03.23

就像他们的名字说的那样:

“内存缓存”将资源存储到内存(RAM)或从中加载资源。因此,这要快得多,但不是持久的。在关闭浏览器之前,内容是可用的。

“磁盘缓存”是永久的。缓存的资源存储在磁盘上,并从磁盘加载。

Simple Test: Open Chrome Developper Tools / Network. Reload a page multiple times. The table column "Size" will tell you that some files are loaded "from memory cache". Now close the browser, open Developper Tools / Network again and load that page again. All cached files are loaded "from disk cache" now, because your memory cache is empty.

村村 2020.03.23

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

  • HTTP缓存
  • 服务工作者缓存
  • 闪烁缓存

HTTP缓存

通过网络发出的每个请求都由遵循RFC的 HTTP缓存代理首次请求时,缓存将被覆盖。资源由原始URL键入密钥。

服务工作者缓存

要正常处理网络连接失败,可以使用Service Workers缓存和缓存存储将再次从磁盘上获取。

闪烁缓存

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

强制进入内存缓存

如果希望通过覆盖内存的默认机制提供文件,则可以实现自己的Service Worker。使用File Api,可以读取资源并将其存储到内存中的对象中。然后,覆盖访存事件将禁止从该全局对象提供内容的网络和文件读取。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android