为啥重新加载我的页面后浏览器会再次获取图像？

Posted 2023-03-28

【中文标题】为啥重新加载我的页面后浏览器会再次获取图像？

【英文标题】：Why browsers fetch images again after reloading my page?为什么重新加载我的页面后浏览器会再次获取图像？

【发布时间】：2021-11-17 23:46:12

【问题描述】：

我正在开发一个网络应用程序，我希望将所有图像（价值几百 MB - 20 000 - 50 000 个缩略图）下载一次，并且不再下载，因为它们并没有真正改变。另外，这些图片是从 youtube 服务器下载的，我不想不必要地敲打他们的服务器。

但问题是，当我重新加载页面时，请求又开始下雨了，而不是加载缓存的图像。当我导航到我的页面并重新加载它时会发生这种情况，但是当我打开另一个页面并按回时，图像是从缓存中加载的。当我使用 javascript 动态添加新内容时，图像也会从缓存中加载。

那么，我错过了什么？

附：我正在使用地址栏附近的重新加载按钮重新加载，而不是使用 Ctrl+R 或其他清除缓存的组合键。

附言在有人对此之前澄清一下，我不会一次下载所有数千张图片

【问题讨论】：

请编辑问题以将其限制为具有足够详细信息的特定问题，以确定适当的答案。

【参考方案1】：

对于应用程序中不会更改的文件，您通常可以通过发送下面的响应头来添加主动缓存。这包括应用程序提供的静态文件，例如图像、CSS 文件和 JavaScript 文件。此外，另请参阅 Expires 标头。

Cache-Control: public, max-age=604800, immutable

MDN Documentation

【参考方案2】：

要回答您的问题，最好的方法是创建一个 Web 服务器（使用 Node.js、ASP.NET Core、php 等）。您的服务器应将资源保存在一个具有最大使用期限的静态文件夹中。

【参考方案3】：

浏览器使用Cache-Control HTTP header 来确定是否应从缓存中检索资产，或再次下载。

由于您是hotlinking YouTube 图片，您无法设置任何 HTTP 标头； YouTube 服务器确定缓存设置。

设置缓存设置最直接的方法是首先从 YouTube 下载图像并将它们保存在您自己的服务器上。然后，您可以在从服务器提供图像时设置 Cache-Control 标头。

对于来自 YouTube 的图片，另一个选项可能是 proxy the HTTP requests：

浏览器从YourServer.com/image/123.png请求图片 YourServer.com 使用所需的缓存标头提供来自YouTube.com/img/123.png 的图像。 HTTP redirect 可能会起作用，但这可能会导致您的缓存标头被 YouTube 的缓存标头覆盖。您的服务器可能只需要从 YouTube.com 流式传输图像数据。 虽然图片来自 YouTube.com，但浏览器会认为图片是从 YourServer.com 提供的，并尊重您的缓存标头。