使用内存缓存与浏览器缓存的优缺点是啥

Posted 2023-03-28

【中文标题】使用内存缓存与浏览器缓存的优缺点是啥

【英文标题】：What are the pros and cons of using in-memory cache vs. browser cache使用内存缓存与浏览器缓存的优缺点是什么

【发布时间】：2021-12-06 20:19:06

【问题描述】：

我一直想知道在 UI 组件内的内存中缓存/保存数据与在客户端浏览器中缓存与 HTTP 的 cache-control 标头之间有什么区别。我认为像 react query 这样的库是前者——它将获取的数据存储在某个全局存储中，并允许用户使用 staleTime 和 cacheTime 来微调数据的新鲜度。

但我想知道我们是否可以通过利用浏览器的缓存来实现缓存 - 每种方法的优缺点是什么。

在我看来，如果我们为 React 查询之类的组件或库实现内存缓存机制，但它与 HTTP-Cache 冲突 - 如Cache-control: no-store，我们不应该将其缓存在组件或库中。例如，有效期为 30 秒的二维码。我想知道是否有一种方法可以从后端发送的 http 响应标头中自动生成组件或库的配置。但我不确定我该怎么做。

【参考方案1】：

HTTP Browser Cache 和 In Memory Cache (A.K.A Application State) 是两个不同的概念。

HTTP 浏览器缓存用于加速客户端与服务器的交互。它的内容是二进制 blob/文本。应用程序状态是您的组件共享并用于呈现 UI 的结构化数据。

对于您的 QR 码示例，您可能可以通过在渲染时获取 QR 码数据的方式实现组件，这仅使用浏览器缓存。但是，如果您需要与其他组件共享获取的结果，例如currentUser 信息，那么您需要将其放入某种应用程序缓存中，以便其他组件可以利用相同的应用程序状态并呈现一致的结果。

【讨论】：

感谢您的回复。是的，我知道它们是两个不同的概念，所以我很想知道权衡