为什么浏览器会多次下载客户端模板生成的图片？答案

【问题标题】：Why is the browser downloading images generated from client-side templates multiple times?为什么浏览器会多次下载客户端模板生成的图片？
【发布时间】：2014-04-08 03:02:06
【问题描述】：

我正在使用 Nancy 构建一个 Web 应用程序，并且正在使用我自己的 Nancy 自定义类来为浏览器提供静态内容。

当我运行演示 (code here) 并单击将从页面中删除图像的链接，然后使用客户端模板将相同的图像渲染回来时，我看到浏览器发出请求每次点击后的图像。

这是我在多次点击我的链接后在 Chrome 开发工具中的网络请求的图片，该链接会呈现带有图像的模板：

我希望图像不会再次从服务器下载。当我使用默认的 Nancy 应用程序或非 .NET-y 的东西运行这个简单的 Web 应用程序时，我只看到一个图像请求。我尝试了 Nancy 的标准静态内容提供程序，golang file server、http-server、isaacs st。他们的行为都是这样的：

我认为我的过期或与缓存相关的标头搞砸了，但我不确定。标题 (here's the diff between the headers from the default Nancy implementation and my code as a gist) 没有透露任何我正在接受的内容。

我有很多问题：

浏览器中发生了什么导致图像被再次下载？
如何改进使用我的开发工具找出导致浏览器再次下载图像的原因？
如果您想参与其中，我的自定义实现有什么问题？

我目前在 Windows 7 上的 Chrome 版本 33.0.1750.146 m 中看到了这种行为。

【问题讨论】：

标签： .net http caching browser

【解决方案1】：

您是否尝试过缓存清除？将唯一的字符串（例如 GUID）附加到 URL 通常可以解决问题。例如：/Content/face.png?v=7c1f4f57f2aa4cf9b707664fb0bd7a05

编辑：一个错字

【讨论】：

嘿！我没有尝试缓存破坏，但我不想再次下载图像。我只是认为它应该下载一次。我编辑了我的问题以澄清我在寻找什么（我认为我最初并不是很清楚）
当你在 DOM 中创建一个新的 img 元素时，就像 Hogan 模板所做的那样，浏览器不会关心它之前是否渲染过它，它会不可知地对待它。静态内容缓存（如图像）必须从服务器控制，而不是从应用程序内部控制。
我同意，我确实认为我的静态内容缓存实现存在问题，但我不确定是什么。我的请求/响应看起来与我看到的其他实现没有太大区别。
当我使用其他静态服务器（即 go 的默认服务器或 nodeapps/http-server）时，我每次都看不到下载的图像，只有一次。为什么我的不是这样？