“?${new ().getTime()}”如何更新JS中的图像？

Question

我看了一个教程，其中他们展示了将?${new Date().getTime()}附加到图像标记中src属性的值，用新图像更新当前图像。

我遇到了this question，在这里，这个问题的第一个答案是遵循同样的技术。

请有人向我解释一下这一特定技术的工作原理。谢谢!

Answer 1

最简单的解释是，浏览器(通常是服务器)将缓存内存中的项，以减少页面加载时间。因此，如果您有十几个页面都在引用/images/logo.png，则会下载一次图像并将其存储起来，以便在每个页面上重新使用。很有效率对吧？

无论如何，有时图像会发生变化，而您不希望这种情况发生，所以您要做的就是更改文件的名称。例如，/images/logo.png?15、/images/logo.png?16、/images/logo.png?17等。浏览器不再尝试使用缓存的图像，因为查询实际上是不同的。

您所包含的代码片段仅包括文件名称的当前时间，以便使其惟一。

Answer 2

不同的查询参数可能导致服务器提供不同的映像，这取决于后端逻辑。这种情况通常不是这样的--在许多设置中，请求具有不同查询参数的相同路径会给出相同的图像作为回报，但情况并不总是如此。

如果浏览器看到一个图像URL，其图像已经存在于缓存中，它将不再下载该图像-相反，它将从浏览器缓存中获取图像。但是，如果您将src更改为不在缓存中的一个，它将向服务器发出另一个请求。如果服务器在初始页面量和src更改之间更改了该端点上的映像，服务器上的新映像将被下载并显示在客户端上。

new Date().getTime()只是一种附加字符串的方法，浏览器缓存中肯定不存在该字符串。