Chrome 内存缓存与磁盘缓存

Posted 2023-02-19

【中文标题】Chrome 内存缓存与磁盘缓存

【英文标题】：Chrome memory cache vs disk cache

【发布时间】：2017-11-19 16:26:27

【问题描述】：

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

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

【问题讨论】：

嗨，Igor，这是否导致了 webpack 的加载问题？你是怎么解决的？

没有问题。这只是一个缓存 webpack 包文件的浏览器缓存功能。

嗨，Igor，当一些捆绑文件从磁盘加载而一些从内存加载时，我发现这是一个问题。发生这种情况时，它会引发 JSONP 错误。这种情况仅在极少数情况下发生。

se/SuperUser

【参考方案1】：

正如他们的名字所说：

“内存缓存”将资源存储到内存 (RAM) 和从内存 (RAM) 加载资源。所以这要快得多，但它是非持久的。内容在您关闭浏览器之前可用。

“磁盘缓存”是持久的。缓存的资源被存储在磁盘中并从磁盘中加载。

简单测试： 打开 Chrome 开发者工具/网络。多次重新加载页面。表格列“大小”将告诉您某些文件是“从内存缓存”加载的。 现在关闭浏览器，再次打开开发者工具/网络并再次加载该页面。现在所有缓存的文件都是“从磁盘缓存”加载的，因为你的内存缓存是空的。

【讨论】：

我不知道这么简单。

浏览器如何确定将哪些资产存储在内存缓存和磁盘缓存中？

我们可以配置内存缓存中应该缓存的内容吗？

我的 Angular 应用程序上有一些在本地运行时从磁盘加载的项目，在生产环境中这些文件根本没有缓存。只有内存中的缓存适用于生产环境。你们知道是什么原因造成的吗？

@RafaelAndrade 请记住，Angular 提供了多种环境（在 src/environments/*.ts 中）。 environment.prod.ts 定义您的生产环境，其中 environment.ts 定义您的本地开发环境。在本地开发环境中，您通常不希望缓存文件，以便您的本地更改始终适用于您的应用程序。

【参考方案2】：

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

HTTP 缓存 Service Worker 缓存 闪烁缓存

HTTP 缓存

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

Service Worker 缓存

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

闪烁缓存

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

强制进入内存缓存

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