依赖Fetch使用缓存来计数是个不好的主意吗？

Question

我正在获取一个静态文件。与将其保存在本地变量中相比，多次获取相同文件的缺点（如果有）是什么？

function getInfo(){
    fetch(src);
}

getInfo();
getInfo();
getInfo();

（显然我不会像这样连续三次运行同一个函数，但我确实经常获取一个静态文件。）

1. fetch 是否会在文件已在本地加载的情况下向服务器发起任何调用？
2. 如果是，有没有办法防止这种情况发生？
3. 使用 fetch 和使用本地变量来保存大型静态文本文件之间是否存在显著的速度差异？

如果我不必要地将从 fetch 获取的静态文件保存到变量中，我希望能避免这样做。但是，如果我只是懒惰，并且它对服务器请求和速度产生重大影响，我想知道。

在 Chrome 中，控制台显示获取的文件已被缓存，并且如果再次获取，则会从缓存中获取文件。我知道其他浏览器可能会不同地处理 fetch 请求。

这里有谁非常熟悉此问题？这在不同浏览器中是否存在很大的差异？规范中是否有任何说明？

- Josh Powlison

---

为什么你的代码会尝试多次获取相同的“静态文件”？请重写你的代码，以便只获取一次:p - Jaromanda X

就像Jaromanda所说的一样，为什么要多次获取相同的静态文件呢？我建议您将数据保存在某种状态管理中，或者将静态文件数据保存在LocalStorage或SessionStorage中。 - MstrQKN

@JaromandaX 我好奇的是，使用缓存是否会有很大的区别。我曾经认为不会，但fetch会缓存文件。 - Josh Powlison

Answer 1

在Chrome中，控制台显示获取的文件已被缓存，如果再次获取该文件，将从缓存中获取。我知道其他浏览器在处理获取请求时可能有所不同。

一般来说，这不应该是特定于浏览器的，除非浏览器在缓存空间用完时过期缓存数据（不同的浏览器可能有不同的算法选择要过期的内容）。 fetch是否会向服务器发出任何调用，即使文件已经本地加载了？

资源是否重新请求、重新验证或完全满足于本地取决于其可缓存性，这取决于您从服务器返回资源的缓存标头（Expires，Cache-Control等）。您可以使用这些标头来说明文件不应该被缓存（由浏览器、浏览器和服务器之间的代理等），或者应该永久缓存，或者介于两者之间。

如果确保缓存标头表明该资源在您希望它被缓存的时间内是可缓存的，则可以期望浏览器尊重该标头，前提是它没有用完缓存空间。

如果是这样，有没有办法阻止这种情况发生？

是的，请设置缓存标头。

“使用fetch和使用本地变量来处理我的大型静态文本文件之间是否存在显着的速度差异？”

嗯，相对而言，本地变量自然会赢得明显的优势，几乎没有时间延迟，而使用fetch则至少需要进行函数调用并检查该项是否被缓存，以及是否需要重新验证或重新请求。但从绝对意义上来说，这可能不太显著。

“如果我通过将fetch获取的静态文件保存到变量中而造成了不必要的空间重复，我想避免这样做。”

如果资源可以缓存，您在某种程度上就会出现这种情况，因为浏览器会将其缓存，并且您将加载一个作为字符串引用的副本。但浏览器的缓存副本可能存储在持久存储（宽松地说，“磁盘”）中，而不是存储在RAM中，如果需要为其他缓存项目腾出空间，则会将其推出RAM。浏览器通常对其缓存使用固定数量的RAM，因此特定项目可能不会增加浏览器使用的RAM缓存量。

---

可能值得注意的是，您可以使用服务工作者在请求和浏览器缓存之间插入自己的代码。

- T.J. Crowder

---

浏览器会将其缓存，您将拥有一个作为字符串加载的副本，由本地变量引用。当然，事实上存在缓存副本并不是什么“内存负担”，因为浏览器通常会使用一定量的RAM用于缓存。 - Jaromanda X

@JaromandaX - 谢谢，我会澄清的，我的意思不是在内存中有两个副本。 - T.J. Crowder

好的，你确实在内存中有两个...一个在RAM缓存中，另一个在程序变量中 - 但这并不像RAM缓存是浏览器没有使用的东西（就内存使用而言）...当然，如果你依赖缓存，你的程序内存使用可能会更少，同时你没有该文件的副本在一个变量中。 - Jaromanda X

Answer 2

当您从服务器加载文件时，您的浏览器会向服务器发送请求并将其内容加载到内存中。这可能需要很长时间。

如果您的浏览器缓存了该文件，则不会向服务器发送请求，而是将缓存的文件加载到内存中。这也需要时间，但与等待请求响应的情况相比，要快得多。

您无法控制浏览器的缓存系统，因此您不会知道文件是否会被缓存，如果缓存，它将被缓存多长时间。

如果您将文件加载到内存中并重复使用它，则速度会更快。由于我们正在讨论文件，因此可以将其内容包装到一个函数中，因此，如果定义了该函数，您只需调用该函数而不是重新发送请求。算法是检查某个函数是否存在。如果存在，则调用它；如果不存在，则加载文件。如果文件已缓存，则将从缓存中加载。否则，将向服务器发送请求。

- Lajos Arpad