【问题标题】:Chrome memory cache vs disk cacheChrome 内存缓存与磁盘缓存
【发布时间】:2017-11-19 16:26:27
【问题描述】:

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

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

【问题讨论】:

  • 嗨,Igor,这是否导致了 webpack 的加载问题?你是怎么解决的?
  • 没有问题。这只是一个缓存 webpack 包文件的浏览器缓存功能。
  • 嗨,Igor,当一些捆绑文件从磁盘加载而一些从内存加载时,我发现这是一个问题。发生这种情况时,它会引发 JSONP 错误。这种情况仅在极少数情况下发生。

标签: google-chrome caching webpack


【解决方案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 事件将禁止使用此全局对象提供的内容进行网络和文件读取。

【讨论】:

    猜你喜欢
    • 2016-06-12
    • 2022-12-20
    • 2015-10-01
    • 2018-01-11
    • 2017-09-25
    • 1970-01-01
    • 2011-01-31
    • 2013-12-26
    • 1970-01-01
    相关资源
    最近更新 更多