javascript - 指望 fetch 来使用缓存是个坏主意吗？

Question

我正在获取一个静态文件。多次获取同一个文件而不是将其保存在局部变量中有什么缺点(如果有的话)？

function getInfo(){
    fetch(src);
}

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

(显然我没有像这样连续运行同一个函数 3 次，但我确实有一个经常获取的静态文件。)

1. 即使文件已在本地加载，fetch 是否会对服务器进行任何类型的调用？
2. 如果是这样，有什么办法可以避免吗？
3. 对于大型静态文本文件，使用 fetch 和使用局部变量之间是否存在明显的速度差异？

如果我通过将静态文件从 fetch 保存到变量中而不必要地加倍空间，我不想这样做。但如果我只是懒惰并且它显着影响服务器请求和速度，我想知道这一点。

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

这里有人对此非常熟悉吗？这在浏览器之间有很大差异吗？规范中有什么可以解释这一点吗？

Answer 1

In Chrome, the console shows that the fetched file is cached and file will be grabbed from the cache if fetched again. I know other browsers may differ in how they handle fetch requests.

一般来说，这不应该是特定于浏览器的，除非浏览器在缓存空间用完时使缓存数据过期(不同的浏览器可能有不同的算法来选择过期内容)。

Does fetch make any sort of call to the server even if the file's been loaded locally?

资源是否被重新请求或重新验证或完全本地满足主要取决于它的可缓存性，这取决于您从服务器返回的缓存 header (Expires，缓存控制等)。您可以使用这些 header 来说明文件永远不应被缓存(通过浏览器、浏览器和服务器之间的代理等)，或者它应该永远缓存，或介于两者之间。

如果您确保缓存 header 表明资源在您希望缓存的时间段内是可缓存的，那么您可以期望浏览器尊重这一点，前提是它没有用完缓存空间。

If so, is there a way to prevent that?

是的，设置缓存头。

Is there a significant speed difference between using fetch and using a local variable for my large, static text files?

好吧，自然地，局部变量将在相对方面显着获胜，接近零时间与至少一个函数调用相比，并检查该项目是否是缓存，如果是，是否需要重新-验证或重新请求。但这在绝对意义上不太可能很重要。

If I'm doubling up on space unnecessarily by saving static files from fetch into variables, I'd like to not do that.

至少在某种意义上，如果资源是可缓存的，因为浏览器将缓存它并且您将加载一个副本作为本地变量引用的字符串。但是浏览器的缓存副本可能在持久存储中(松散地称为“磁盘”)，而不是在 RAM 中，并且如果需要为其他缓存项腾出空间，它将被推出 RAM。浏览器通常为其缓存使用最多固定数量的 RAM，因此该项目特别可能不会增加浏览器使用的 RAM 缓存数量。

---

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