我看了一个教程,他们在教程中展示了将?${new Date().getTime()}
附加到image标记中src属性的值,可以用新图像更新当前图像。
我遇到了这个问题,这个问题的第一个答案采用了同样的技巧。
有人能向我解释一下这种特殊技术背后的原理吗。谢谢
最简单的解释是浏览器(通常是服务器(将在内存中缓存项目以减少页面加载时间。因此,如果有十几个页面都引用了/images/logo.png
,则会下载一次图像并进行存储,以便在每个页面上重复使用。高效,对吧?
无论如何,有时图像会发生变化,而你不希望这种情况发生,所以你要做的就是更改文件名。例如,/images/logo.png?15
、/images/logo.png?16
、/images/logo.png?17
等。浏览器不再尝试使用缓存的图像,因为查询实际上不同。
您所包含的代码片段只是将当前时间包含在文件名中,以使其具有唯一性。
根据后端逻辑,不同的查询参数可能会导致服务器提供不同的图像。通常情况并非如此-在许多设置中,使用不同的查询参数请求相同的路径会得到相同的图像作为回报,但情况并非总是如此。
如果浏览器看到缓存中已经存在图像的图像URL,它将不会再次下载该图像,而是从浏览器缓存中获取该图像。但是,如果将src
更改为缓存中的而非,它将向服务器发出另一个请求。如果服务器在初始页面加载和src更改之间更改了该端点的映像,则服务器上的新映像将被下载并显示在客户端上。
new Date().getTime()
只是一种附加字符串的方式,该字符串在浏览器缓存中肯定还不存在。