指望 fetch 来使用缓存是个坏主意吗?

Is counting on fetch to use the cache a bad idea?

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

function getInfo(){
    fetch(src);
}

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

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

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

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

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

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

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.

一般来说,这不应该是 browser-specific,除非浏览器在缓存数据 运行 超出缓存 space 时使缓存数据过期(不同的浏览器可能有不同的算法选择要过期的内容)。

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

资源是 re-requested 还是 re-verified 或完全本地满足主要取决于它的可缓存性,这取决于缓存 headers 你 return 来自服务器(ExpiresCache-Control 等)。你可以使用那些 headers 来表示文件不应该被缓存(通过浏览器,通过浏览器和服务器之间的代理等),或者它应该永远缓存,或者在某个地方 in-between .

如果您确保缓存 headers 表明资源在您希望缓存的时间段内是可缓存的,那么您可以期望浏览器尊重这一点,前提是它不会 运行 缓存不足 space.

If so, is there a way to prevent that?

是,设置缓存headers。

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

好吧,相对而言,局部变量自然会显着获胜,near-zero 时间与至少一个函数调用相比,并检查该项目是否是缓存,如果是,它是否需要为 re-validated 或 re-requested。但这在绝对意义上不太可能很重要。

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

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


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

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

如果您的浏览器缓存了文件,那么缓存的文件将加载到内存中,而不是向服务器发送请求。这也很耗时,但没有等待请​​求响应的情况那么多。

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

如果将文件加载到内存中并重新使用它,那么它会快得多。由于我们讨论的是一个文件,您可以将其内容包装到一个函数中,因此,您无需重新发送请求,只需调用已定义的函数即可。该算法是检查某个函数是否存在。如果是,调用它,如果不是,加载文件。如果文件被缓存,那么它将从缓存中加载。否则,将向服务器发送请求。