我对Chrome内存缓存与磁盘缓存有兴趣吗?我使用webpack,常见的块插件,并使用chunkhash生成我的所有文件。
内存与磁盘缓存有何不同?当我重新加载页面时,某些文件是从内存缓存中加载的,而某些是从磁盘缓存中加载的(从内存缓存中的bundle.js和image.jpg以及从磁盘缓存中的css)。有时情况有所不同。我们可以控制它,选择从哪里加载什么?内存缓存似乎比磁盘缓存快。
我对Chrome内存缓存与磁盘缓存有兴趣吗?我使用webpack,常见的块插件,并使用chunkhash生成我的所有文件。
内存与磁盘缓存有何不同?当我重新加载页面时,某些文件是从内存缓存中加载的,而某些是从磁盘缓存中加载的(从内存缓存中的bundle.js和image.jpg以及从磁盘缓存中的css)。有时情况有所不同。我们可以控制它,选择从哪里加载什么?内存缓存似乎比磁盘缓存快。
Chrome在许多抽象级别上实现了缓存。核心是HTTP(浏览器)缓存-其他缓存机制的后端。通常,缓存可以分为:
HTTP缓存
通过网络发出的每个请求都由遵循RFC的 HTTP缓存代理。首次请求时,缓存将被覆盖。资源由原始URL键入密钥。
服务工作者缓存
要正常处理网络连接失败,可以使用Service Workers。缓存和缓存存储将再次从磁盘上获取。
闪烁缓存
Blink使用Http Cache作为后端的两种创建方式-内存和简单(文件系统)。使用哪种缓存取决于全局设置的缓存限制,它们可以占用多少内存。同样,当前的渲染器缓存获得最多的共享。缓存的是字体,图像和脚本。如果全局内存使用率达到某个指定的阈值,则使用文件系统后端。
强制进入内存缓存
如果希望通过覆盖内存的默认机制提供文件,则可以实现自己的Service Worker。使用File Api,可以读取资源并将其存储到内存中的对象中。然后,覆盖访存事件将禁止从该全局对象提供内容的网络和文件读取。
就像他们的名字说的那样:
“内存缓存”将资源存储到内存(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.