Chrome内存缓存与磁盘缓存

Question

我对chrome内存缓存与磁盘缓存感兴趣？我使用webpack，common chunks插件并使用chunkhash生成我的所有文件。

内存与磁盘缓存有何不同。当我重新加载我的页面时，一些文件从内存缓存加载，一些文件从磁盘缓存加载（bundle.js和image.jpg来自内存缓存，css来自磁盘缓存）。有时它会有所不同。我们可以控制它，从哪里选择加载的东西吗？内存缓存似乎比磁盘缓存更快。

Answer 1

像他们的名字一样说：

＆＃34; Memory Cache＆＃34;存储和加载来自内存（RAM）的资源。所以这要快得多，但它是非持久性的。在关闭浏览器之前，内容可用。

＆＃34;磁盘缓存＆＃34;坚持不懈。缓存资源存储在磁盘上或从磁盘加载。

简单测试： 打开Chrome开发者工具/网络。多次重新加载页面。表格栏＆＃34;尺寸＆＃34;会告诉你一些文件是从内存缓存中加载的＃34; 现在关闭浏览器，再次打开Developper Tools / Network并再次加载该页面。所有缓存的文件都是从磁盘缓存中加载的＃34;现在，因为你的内存缓存是空的。

Answer 2

Chrome在多个抽象级别实现缓存。核心是HTTP（浏览器）缓存 - 其他缓存机制的后端。通常，缓存可以分为：

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

HTTP缓存

通过网络发出的每个请求都由遵守RFC的HTTP Cache代理。第一次请求时，缓存被覆盖。资源由原始URL键入。

服务工作缓存

要优雅地处理网络连接失败，您可以使用Service Workers。缓存和缓存存储将再次从磁盘中获取。

闪烁缓存

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

强制进入内存缓存

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

Answer 3

1. CSS文件使用磁盘缓存。
2. <script>使用内存缓存。
   • 关闭浏览器，再次打开，使用磁盘缓存。然后刷新它，使用内存缓存。
3. document.createElement('script')使用磁盘缓存。

Answer 4

磁盘缓存是RAM内存，其中包含磁盘上信息的副本。通常，当您访问驱动器上的某些内容时，假设下一次访问将在该页面中，整个页面将进入缓存。第一次磁盘搜索可能需要8ms，而下一次缓存可能需要100 ns。

内存缓存是相同的概念，但缓存位于CPU芯片上。因此原始内存访问是100ns，然后缓存访问可以是0.5 ns。

内存和磁盘缓存实现将尝试猜测接下来需要使用的内容，而浏览器缓存会保留本地副本以防您再次使用它。