浏览器是否有可能缓存图像并且不发出请求？答案

【问题标题】：Is it possible that browser cache an image and does not make the request?浏览器是否有可能缓存图像并且不发出请求？
【发布时间】：2023-04-02 08:06:01
【问题描述】：

我正在使用 react 来呈现一个简单的 <img> 标签。当我卸载和挂载（图像实际上是从 dom 中删除并重新渲染）时，我通常可以看到图像，但是如果我看到 devtools 的“网络”选项卡，我看不到浏览器发出的任何类型的请求。（并且服务器没有收到任何内容，因此实际上没有发出请求）。

这怎么可能？通常，当浏览器使用缓存时，您会看到请求并从服务器获得“从磁盘”或 304，在这种情况下，不会发出请求。

我的服务器正在发送带有 etag 的 Cache-Control: 'no-cache' 因为我需要浏览器随时与服务器进行检查。

这可能吗？

这里是一个例子，如果你打开标签网络并按下“隐藏”，你可以看到没有发出请求。我怎样才能避免这种情况？

https://codesandbox.io/s/lj5mm7rjm

【问题讨论】：

如果我在 vanilla JS 中添加和删除图像，我也看不到新请求，也许浏览器足够聪明，可以看到它是同一个图像...
@LucaKiebel 我怎样才能避免这种情况？
我不知道，您为什么要避免这种情况？这似乎是聪明的行为。如果您不希望浏览器缓存内容，您可以为此发送相应的标头。
@LucaKiebel 我正在设置 Cache-Control: no-cache 因为我希望浏览器随时询问服务器，但它似乎不起作用。
我的猜测是浏览器已经将它加载到内存中。如果刷新页面，如果图像已被缓存，通常会看到对磁盘而不是对服务器的请求。您的浏览器足够聪明，可以知道图像路径是相同的，并且可以从内存中提供它。

标签： javascript reactjs image caching browser

【解决方案1】：

抑制这种行为的一种简单方法是添加一个时间参数，例如：

render() {
    const time = new Date().getTime();
    const url = `http://iserotope.com/wp-content/uploads/2014/10/hi.jpg?t=${time}`;
    
    return (
      <div className="App">
        {!this.state.hide && (
          <img
            width="100"
            src={url}
          />
        )}

        <h2 onClick={this.toggle}>hide</h2>
      </div>
    );
  }

【讨论】：

但是这样我不能使用etags从服务器获取304响应
我认为您正在缓存控制标头上寻找must-revalidate。但我不确定你的情况会怎样。